471 lines
26 KiB
TypeScript
471 lines
26 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { asc, eq } from "drizzle-orm";
|
|
import { notFound } from "next/navigation";
|
|
import {
|
|
ArrowLeft,
|
|
Bookmark,
|
|
Braces,
|
|
ChevronDown,
|
|
ChevronRight,
|
|
ClipboardList,
|
|
FileDown,
|
|
StickyNote,
|
|
} from "lucide-react";
|
|
|
|
import { AnnotationTypeIcon } from "@/components/AnnotationTypeIcon";
|
|
import CollapsibleBlock from "@/components/summary/CollapsibleBlock";
|
|
import { db } from "@/db";
|
|
import {
|
|
annotations,
|
|
bookmarks,
|
|
files,
|
|
toAnnotationDTO,
|
|
toBookmarkDTO,
|
|
type AnnotationDTO,
|
|
type AnnotationType,
|
|
type BookmarkDTO,
|
|
} from "@/db/schema";
|
|
import {
|
|
annotationNote,
|
|
annotationPreviewText,
|
|
annotationTypeLabel,
|
|
} from "@/utils/annotation-display";
|
|
import { withBasePath } from "@/utils/base-path";
|
|
|
|
// หน้าสรุปหมายเหตุ (F15/D2) — server component รวม annotation (ทุกผู้ใช้) + bookmark
|
|
// จัดกลุ่มตามหน้า แต่ละแถวกระโดดเป็น deep link `/annotate/<id>?ann=` / `?page=` (F12)
|
|
// — design "แฟ้มสำนวน" 2026-09-17: แถบหัวกระดาษน้ำเงิน (สืบต่อจาก tile JN ของแบรนด์) +
|
|
// รายการตามหน้าจุดไข่ปลา + การ์ดรายหน้า 1 หน้า 1 การ์ด (คำขอผู้ใช้ 2026-09-17 แทนแผ่น
|
|
// กระดาษแผ่นเดียวคั่นเส้น) แต่ละการ์ดมีขอบ folio เลขหน้าใหญ่; รายการตามหน้าเป็น anchor
|
|
// link (#page-N) ล้วน — desktop เป็น sticky aside แบบการ์ด ส่วนมือถือ (< lg) เป็น
|
|
// <details> แบบการ์ด ไม่มี JS / client component เดียวของหน้าคือ CollapsibleBlock
|
|
// (หุบ/กางกลุ่ม Bookmark/Annotation)
|
|
|
|
const UUID_RE =
|
|
/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
|
|
|
|
/** ชื่อย่อต่อชนิดสำหรับบรรทัดสรุปของแต่ละหน้า (ชื่อเต็มอยู่ที่ annotationTypeLabel) */
|
|
const TYPE_SHORT: Record<AnnotationType, string> = {
|
|
HIGHLIGHT: "ไฮไลต์",
|
|
DRAW: "เส้นวาด",
|
|
COMMENT: "คอมเมนต์",
|
|
SHAPE: "รูปทรง",
|
|
REDACTION: "ปิดพราง",
|
|
TEXTBOX: "กล่องข้อความ",
|
|
STAMP: "ตรายาง",
|
|
};
|
|
|
|
/** ลำดับชนิดในบรรทัดสรุป — ตามลำดับ enum ให้ deterministic ไม่ขึ้นกับลำดับสร้างรายการ */
|
|
const TYPE_ORDER = Object.keys(TYPE_SHORT) as AnnotationType[];
|
|
|
|
type PageBucket = {
|
|
anns: AnnotationDTO[];
|
|
bms: BookmarkDTO[];
|
|
typeCounts: Partial<Record<AnnotationType, number>>;
|
|
resolvedCount: number;
|
|
participants: Set<string>;
|
|
};
|
|
|
|
/** บรรทัดสรุปของหน้า: "ไฮไลต์ 1 · คอมเมนต์ 1 (จัดการแล้ว 1) · โดย ผู้พิพากษา ก., เลขานุการ ข."
|
|
* (หน้าที่มีแต่ที่คั่นหน้า = "โดย …" อย่างเดียว) */
|
|
function pageSummaryLine(b: PageBucket): string {
|
|
const parts: string[] = [];
|
|
for (const t of TYPE_ORDER) {
|
|
const n = b.typeCounts[t];
|
|
if (!n) continue;
|
|
if (t === "COMMENT" && b.resolvedCount > 0)
|
|
parts.push(`คอมเมนต์ ${n} (จัดการแล้ว ${b.resolvedCount})`);
|
|
else parts.push(`${TYPE_SHORT[t]} ${n}`);
|
|
}
|
|
const who = Array.from(b.participants).sort((x, y) => x.localeCompare(y, "th"));
|
|
const shown = who.slice(0, 3).join(", ");
|
|
const whoLabel = who.length > 3 ? `${shown} และอีก ${who.length - 3} คน` : shown;
|
|
return parts.length > 0 ? `${parts.join(" · ")} · โดย ${whoLabel}` : `โดย ${whoLabel}`;
|
|
}
|
|
|
|
/** focus ring ร่วมของทุกลิงก์ในหน้า — Genesis .focus-ring (outline น้ำเงินทึบ 2px
|
|
* + offset ตาม spec Elevation); จอสัมผัสได้ 44px อัตโนมัติจากกฎ
|
|
* `main.summary-page a`/`button` ใน globals.css (ห้ามถอด class summary-page ของ <main>) */
|
|
const RING_CLS = "focus-ring";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
// design review 2026-09-17 M5: ชื่อแท็บ browser ระบุคดี — เลขานุการเปิดหลายคดี
|
|
// หลายแท็บพร้อมกัน (เดิมทุกแท็บชื่อ "Judge's Note" เหมือนกันหมดแยกไม่ออก)
|
|
export async function generateMetadata({
|
|
params,
|
|
}: {
|
|
params: { id: string };
|
|
}): Promise<Metadata> {
|
|
const { id } = params;
|
|
if (!UUID_RE.test(id)) return { title: "สรุปหมายเหตุ | Judge's Note" };
|
|
const [file] = await db
|
|
.select({ title: files.title })
|
|
.from(files)
|
|
.where(eq(files.id, id));
|
|
return {
|
|
title: `สรุปหมายเหตุ — ${file?.title ?? "ไม่พบไฟล์"} | Judge's Note`,
|
|
};
|
|
}
|
|
|
|
export default async function SummaryPage({
|
|
params,
|
|
}: {
|
|
params: { id: string };
|
|
}) {
|
|
const { id } = params;
|
|
if (!UUID_RE.test(id)) notFound();
|
|
|
|
const [file] = await db.select().from(files).where(eq(files.id, id));
|
|
if (!file) notFound();
|
|
|
|
const annRows = await db
|
|
.select()
|
|
.from(annotations)
|
|
.where(eq(annotations.fileId, id))
|
|
.orderBy(asc(annotations.pageIndex), asc(annotations.createdAt));
|
|
const dtos = annRows.map(toAnnotationDTO);
|
|
|
|
// bookmark เรียงตามหน้า → ตำแหน่งบนหน้า → เวลาสร้าง (N5 เหมือน sidebar)
|
|
const bmRows = await db
|
|
.select()
|
|
.from(bookmarks)
|
|
.where(eq(bookmarks.fileId, id))
|
|
.orderBy(
|
|
asc(bookmarks.pageIndex),
|
|
asc(bookmarks.yOffset),
|
|
asc(bookmarks.createdAt),
|
|
);
|
|
const bmDtos = bmRows.map(toBookmarkDTO);
|
|
const bookmarkById = new Map(bmDtos.map((b) => [b.id, b] as const));
|
|
|
|
// จัดกลุ่มตามหน้าแบบ union — หน้าปรากฏเมื่อมี annotation หรือ bookmark ≥ 1 รายการ
|
|
const pageMap = new Map<number, PageBucket>();
|
|
const bucketOf = (pageIndex: number): PageBucket => {
|
|
let b = pageMap.get(pageIndex);
|
|
if (!b) {
|
|
b = { anns: [], bms: [], typeCounts: {}, resolvedCount: 0, participants: new Set() };
|
|
pageMap.set(pageIndex, b);
|
|
}
|
|
return b;
|
|
};
|
|
for (const a of dtos) {
|
|
const b = bucketOf(a.pageIndex);
|
|
b.anns.push(a);
|
|
b.typeCounts[a.type] = (b.typeCounts[a.type] ?? 0) + 1;
|
|
if (a.type === "COMMENT" && a.resolved) b.resolvedCount += 1;
|
|
b.participants.add(a.userName);
|
|
}
|
|
for (const b of bmDtos) {
|
|
const bucket = bucketOf(b.pageIndex);
|
|
bucket.bms.push(b);
|
|
bucket.participants.add(b.userName || "ไม่ทราบชื่อ");
|
|
}
|
|
const pages = Array.from(pageMap.entries()).sort((x, y) => x[0] - y[0]);
|
|
|
|
// ภาพรวมระดับไฟล์สำหรับรายการตามหน้า desktop (sticky aside) + มือถือ (<details>)
|
|
const allParticipants = Array.from(
|
|
new Set([
|
|
...dtos.map((a) => a.userName),
|
|
...bmDtos.map((b) => b.userName || "ไม่ทราบชื่อ"),
|
|
]),
|
|
).sort((x, y) => x.localeCompare(y, "th"));
|
|
|
|
return (
|
|
<main className="summary-page mx-auto max-w-3xl px-4 py-6 lg:max-w-6xl lg:px-8">
|
|
{/* หัวกระดาษสำนวน — แถบน้ำเงินสืบต่อจาก tile JN ของแบรนด์ (หน้ารายการ/login):
|
|
ชื่อรายงาน + ชื่อแฟ้ม + สถิติในที่เดียว แล้วปิดท้ายด้วยเส้นคั่นบาง */}
|
|
<header className="rounded-xl bg-primary px-5 py-4 text-white sm:px-6">
|
|
<h1 className="text-lg font-semibold leading-snug">สรุปหมายเหตุ</h1>
|
|
<p className="mt-0.5 break-words text-sm text-white/85">{file.title}</p>
|
|
{pages.length > 0 && (
|
|
<p className="mt-2 text-xs tabular-nums text-white/70">
|
|
Annotation {dtos.length} รายการ · Bookmark {bmDtos.length} รายการ ·{" "}
|
|
{pages.length} หน้า
|
|
</p>
|
|
)}
|
|
</header>
|
|
|
|
{/* แถบ action — ghost button ขาวมีขอบ ภาษาเดียวกับการ์ดของหน้า (คำขอผู้ใช้
|
|
2026-09-17 แทนลิงก์ข้อความเปล่า — เห็นเป็นปุ่มชัดขึ้น; จอสัมผัสได้ 44px
|
|
จากกฎ coarse; ตอนพิมพ์ซ่อนทิ้ง — ปุ่มกลับ/export ไม่มีความหมายบนกระดาษ) */}
|
|
<div className="mt-3 flex flex-wrap items-center justify-between gap-x-2 gap-y-1 print:hidden">
|
|
<Link
|
|
href={`/annotate/${id}`}
|
|
className={`inline-flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink hover:border-ink-faint hover:bg-ink/[0.03] ${RING_CLS}`}
|
|
>
|
|
<ArrowLeft aria-hidden className="h-3.5 w-3.5" />
|
|
กลับหน้าอ่าน
|
|
</Link>
|
|
<div className="flex items-center gap-2">
|
|
{/* F16/D3: export สรุปเป็น CSV (UTF-8 BOM) */}
|
|
<a
|
|
href={withBasePath(`/api/annotations/export-csv?fileId=${id}`)}
|
|
className={`flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink hover:border-ink-faint hover:bg-ink/[0.03] ${RING_CLS}`}
|
|
>
|
|
<FileDown aria-hidden className="h-3.5 w-3.5" />
|
|
ส่งออกสรุป (CSV)
|
|
</a>
|
|
{/* N7: ส่งออก Bookmark ทั้งหมดเป็น JSON (label บอกขอบเขตเอง — คู่กับ
|
|
"ส่งออกสรุป (CSV)" ข้างบน ไม่ต้องพึ่ง title tooltip ที่จอสัมผัสใช้ไม่ได้) */}
|
|
<a
|
|
href={withBasePath(`/api/bookmarks/export?fileId=${id}`)}
|
|
className={`flex items-center gap-1.5 rounded-md border border-line bg-white px-3 py-1.5 text-sm text-ink hover:border-ink-faint hover:bg-ink/[0.03] ${RING_CLS}`}
|
|
>
|
|
<Braces aria-hidden className="h-3.5 w-3.5" />
|
|
ส่งออก Bookmark (JSON)
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{pages.length === 0 ? (
|
|
<div className="mt-5 rounded-xl border border-dashed border-line bg-white/70 p-10 text-center">
|
|
<ClipboardList aria-hidden className="mx-auto h-8 w-8 text-ink-faint" />
|
|
<p className="mt-3 text-sm font-medium text-ink-soft">
|
|
ยังไม่มี Annotation หรือ Bookmark ในไฟล์นี้
|
|
</p>
|
|
<p className="mt-1 text-xs text-ink-soft">
|
|
เปิดหน้าอ่านเพื่อมาร์กข้อความ วาดเส้น ใส่คอมเมนต์ หรือคั่นหน้า
|
|
</p>
|
|
<Link
|
|
href={`/annotate/${id}`}
|
|
className={`mt-4 inline-flex rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-px hover:bg-primary-hover hover:shadow-btn-glow ${RING_CLS}`}
|
|
>
|
|
เปิดหน้าอ่าน
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="mt-5 lg:grid lg:grid-cols-[220px_minmax(0,1fr)] lg:items-start lg:gap-8">
|
|
{/* รายการตามหน้ามือถือ (จอ < lg) — design review 2026-09-17 H2: คืน navigation ที่หาย
|
|
ไปบนมือถือ (aside ด้านล่างแสดงเฉพาะ lg) ใช้ <details> ได้หุบ/กาง + keyboard
|
|
โดยไม่มี JS เพิ่ม — จุดไข่ปลา + ผู้ร่วมทำ ภาษาเดียวกับ desktop (จอ lg กับ
|
|
ตอนพิมพ์ซ่อน — display:none ไม่กินช่องของกริด) */}
|
|
<details className="group rounded-xl border border-line bg-white lg:hidden print:hidden">
|
|
<summary className="flex cursor-pointer list-none items-center justify-between rounded-md px-4 py-3 text-sm font-semibold text-ink hover:text-primary [&::-webkit-details-marker]:hidden">
|
|
รายการตามหน้าและผู้ร่วมทำ
|
|
<ChevronDown
|
|
aria-hidden
|
|
className="h-4 w-4 shrink-0 text-ink-faint transition-transform group-open:rotate-180 motion-reduce:transition-none"
|
|
/>
|
|
</summary>
|
|
<nav
|
|
aria-label="รายการตามหน้า"
|
|
className="flex flex-col gap-0.5 border-t border-line/70 px-2 pb-2 pt-2"
|
|
>
|
|
{pages.map(([pi, b]) => (
|
|
<a
|
|
key={pi}
|
|
href={`#page-${pi + 1}`}
|
|
aria-label={`หน้า ${pi + 1}, ${b.anns.length + b.bms.length} รายการ`}
|
|
className={`flex items-end gap-1.5 rounded-md px-2 py-2 text-sm text-ink-soft hover:text-primary ${RING_CLS}`}
|
|
>
|
|
<span className="leading-5">หน้า {pi + 1}</span>
|
|
<span
|
|
aria-hidden
|
|
className="mb-1.5 min-w-4 flex-1 border-b border-dotted border-ink-faint"
|
|
/>
|
|
<span className="leading-5 tabular-nums text-ink-soft">
|
|
{b.anns.length + b.bms.length}
|
|
</span>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
<p className="border-t border-line/70 px-4 py-3 text-xs leading-relaxed text-ink-soft">
|
|
ผู้ร่วมทำ: {allParticipants.join(" · ")}
|
|
</p>
|
|
</details>
|
|
|
|
{/* รายการตามหน้า (จอ ≥ lg) — จุดไข่ปลาแบบสารบัญของเอกสารราชการ anchor ล้วนไม่มี JS
|
|
เป็นการ์ดชุดเดียวกับ <details> มือถือและการ์ดรายหน้า (แสดงเฉพาะหน้าที่มี
|
|
รายการ ≥ 1 ตามหลัก minimize choices; max-h กันเอกสารหลายสิบหน้าสูงเกินจอ
|
|
— ครึ่งล่างของ sticky กดไม่ได้ตลอดกาล) */}
|
|
<aside className="hidden rounded-xl border border-line bg-white p-4 lg:sticky lg:top-6 lg:block lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto">
|
|
<h2 className="text-sm font-semibold text-ink">รายการตามหน้า</h2>
|
|
<nav aria-label="รายการตามหน้า" className="mt-2 flex flex-col gap-1">
|
|
{pages.map(([pi, b]) => (
|
|
<a
|
|
key={pi}
|
|
href={`#page-${pi + 1}`}
|
|
aria-label={`หน้า ${pi + 1}, ${b.anns.length + b.bms.length} รายการ`}
|
|
className={`flex items-end gap-1.5 rounded-md px-1 text-sm text-ink-soft hover:text-primary ${RING_CLS}`}
|
|
>
|
|
<span className="leading-5">หน้า {pi + 1}</span>
|
|
<span
|
|
aria-hidden
|
|
className="mb-1.5 min-w-4 flex-1 border-b border-dotted border-ink-faint"
|
|
/>
|
|
<span className="leading-5 tabular-nums text-ink-soft">
|
|
{b.anns.length + b.bms.length}
|
|
</span>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
|
|
<h2 className="mt-6 border-t border-line pt-4 text-sm font-semibold text-ink">
|
|
ผู้ร่วมทำ
|
|
</h2>
|
|
<p className="mt-1.5 px-1 text-xs leading-relaxed text-ink-soft">
|
|
{allParticipants.join(" · ")}
|
|
</p>
|
|
</aside>
|
|
|
|
{/* การ์ดรายหน้า — 1 หน้า 1 การ์ด เรียงลงมาแยกด้วยช่องว่าง (คำขอผู้ใช้
|
|
2026-09-17 แทนแผ่นกระดาษแผ่นเดียวคั่นเส้น); แต่ละการ์ดมีขอบ folio:
|
|
เลขหน้าใหญ่ + เส้นดิ่ง แบบเลขหน้าบนขอบกระดาษ (mt-5 lg:mt-0 — ระยะจาก
|
|
รายการตามหน้า <details> บนมือถือ; จอ lg กริดจัดให้) */}
|
|
<div className="mt-5 flex flex-col gap-4 lg:mt-0">
|
|
{pages.map(([pi, b]) => {
|
|
return (
|
|
<section
|
|
key={pi}
|
|
id={`page-${pi + 1}`}
|
|
aria-labelledby={`page-${pi + 1}-title`}
|
|
className="scroll-mt-6 grid grid-cols-[2.75rem_1fr] rounded-xl border border-line bg-white sm:grid-cols-[3.75rem_1fr]"
|
|
>
|
|
{/* ขอบ folio — "หน้า" เล็ก + เลขใหญ่ชิดเส้นดิ่ง */}
|
|
<div className="border-r border-line/60 py-4 pl-3 pr-2 text-right sm:pl-4">
|
|
<h2 id={`page-${pi + 1}-title`} className="tabular-nums">
|
|
<span className="block text-[11px] leading-none text-ink-soft">
|
|
หน้า
|
|
</span>
|
|
{/* เลขหน้าเป็น ink ไม่ใช่ primary — Genesis "น้ำเงินเฉพาะของ
|
|
interactive" (ตัดสินใจพร้อม exception list ใน DESIGN.md
|
|
2026-09-23) ความเด่นมาจากขนาด 2xl semibold tabular-nums */}
|
|
<span className="mt-1 block text-2xl font-semibold leading-none text-ink">
|
|
{pi + 1}
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
|
|
{/* เนื้อหาของหน้า — บรรทัดสรุปหน้า (ไม่มีหัวข้อคำอธิบาย) /
|
|
Bookmark / Annotation (หุบ-กางได้, รายการเยื้องจากหัวข้อ) */}
|
|
<div className="min-w-0 py-3 pl-3 pr-3 sm:pl-4 sm:pr-5 sm:py-4">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="min-w-0">
|
|
<p className="text-sm leading-relaxed text-ink-soft">
|
|
{pageSummaryLine(b)}
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href={`/annotate/${id}?page=${pi + 1}`}
|
|
className={`inline-flex shrink-0 items-center gap-0.5 text-xs text-primary hover:underline ${RING_CLS}`}
|
|
>
|
|
เปิดหน้านี้
|
|
<ChevronRight aria-hidden className="h-3 w-3" />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* ที่คั่นหน้าของหน้านี้ทั้งหมด (root + sub) เรียงตาม yOffset */}
|
|
{b.bms.length > 0 && (
|
|
<div className="mt-2">
|
|
<CollapsibleBlock kind="bookmark" count={b.bms.length}>
|
|
<ul className="divide-y divide-line/70">
|
|
{b.bms.map((bm) => {
|
|
const parent = bm.parentId
|
|
? bookmarkById.get(bm.parentId)
|
|
: undefined;
|
|
return (
|
|
<li key={bm.id} className="ml-4">
|
|
<Link
|
|
href={`/annotate/${id}?page=${pi + 1}`}
|
|
className={`group -mx-2 flex items-start gap-2 rounded-lg px-2 py-2.5 transition hover:bg-ink/[0.03] ${RING_CLS}`}
|
|
>
|
|
<Bookmark
|
|
aria-hidden
|
|
className="mt-1 h-4 w-4 shrink-0 text-warning-ink"
|
|
/>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block whitespace-pre-wrap break-words text-sm font-medium leading-snug text-ink">
|
|
{bm.title}
|
|
</span>
|
|
<span className="mt-0.5 block truncate text-xs text-ink-soft">
|
|
โดย {bm.userName || "ไม่ทราบชื่อ"}
|
|
{parent ? ` · ใน: ${parent.title}` : ""}
|
|
</span>
|
|
{bm.note && (
|
|
<span className="mt-0.5 flex items-start gap-1 text-xs leading-relaxed text-ink-soft">
|
|
<StickyNote
|
|
aria-hidden
|
|
className="mt-0.5 h-3 w-3 shrink-0 text-warning-ink"
|
|
/>
|
|
<span className="line-clamp-2 whitespace-pre-wrap break-words">
|
|
{bm.note}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</span>
|
|
<ChevronRight
|
|
aria-hidden
|
|
className="mt-1.5 h-4 w-4 shrink-0 text-ink-faint group-hover:text-ink"
|
|
/>
|
|
</Link>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</CollapsibleBlock>
|
|
</div>
|
|
)}
|
|
|
|
{/* หมายเหตุของหน้านี้ — แถวคลิกได้ทั้งแถว (เป้าใหญ่บนจอสัมผัส) */}
|
|
{b.anns.length > 0 && (
|
|
<div className={b.bms.length > 0 ? "mt-3" : "mt-2"}>
|
|
<CollapsibleBlock kind="annotation" count={b.anns.length}>
|
|
<ul className="divide-y divide-line/70">
|
|
{b.anns.map((a) => (
|
|
<li key={a.id} className="ml-4">
|
|
<Link
|
|
href={`/annotate/${id}?ann=${a.id}`}
|
|
className={`group -mx-2 flex items-start gap-2 rounded-lg px-2 py-2.5 transition hover:bg-ink/[0.03] ${RING_CLS}`}
|
|
>
|
|
<AnnotationTypeIcon
|
|
type={a.type}
|
|
data={a.data}
|
|
className="mt-1 h-4 w-4 shrink-0 text-ink-soft"
|
|
/>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block whitespace-pre-wrap break-words text-sm leading-snug text-ink">
|
|
{annotationPreviewText(a)}
|
|
{a.type === "COMMENT" && a.resolved && (
|
|
<span className="ml-1.5 whitespace-nowrap rounded border border-success/40 bg-success/10 px-1.5 py-0.5 text-xs font-medium text-success-ink">
|
|
จัดการแล้ว
|
|
</span>
|
|
)}
|
|
</span>
|
|
<span className="mt-0.5 block text-xs text-ink-soft">
|
|
{annotationTypeLabel(a)} · โดย {a.userName}
|
|
</span>
|
|
{annotationNote(a) && (
|
|
<span className="mt-0.5 flex items-start gap-1 text-xs leading-relaxed text-ink-soft">
|
|
<StickyNote
|
|
aria-hidden
|
|
className="mt-0.5 h-3 w-3 shrink-0 text-warning-ink"
|
|
/>
|
|
<span className="line-clamp-2 whitespace-pre-wrap break-words">
|
|
{annotationNote(a)}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</span>
|
|
<ChevronRight
|
|
aria-hidden
|
|
className="mt-1.5 h-4 w-4 shrink-0 text-ink-faint group-hover:text-ink"
|
|
/>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</CollapsibleBlock>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|