summary: หน้าสรุป design "แฟ้มสำนวน" + แก้ตาม design review 2026-09-17 — การ์ดรายหน้า 1 หน้า 1 การ์ด + สารบัญมือถือ + ghost buttons

งานหลักจาก design review (H/M/L ทั้งหมดยกเว้น L5 ที่จบเอง — หัวข้อ Explanation ถูกถอดไปก่อนหน้านี้ตามคำขอผู้ใช้ พร้อม icon ℹ + เส้น):
(1) H1 กฎ coarse 44px ครอบ button ด้วย (main.summary-page button min-height 2.75rem) — ปุ่มหุบ/กาง CollapsibleBlock เดิมหลุดกฎเพราะเป็น <button> ไม่ใช่ <a> สูงจริง ~29px
(2) H2 สารบัญมือถือ (< lg) — <details> การ์ด "สารบัญและผู้ร่วมทำ" จุดไข่ปลา + ผู้ร่วมทำภาษาเดียวกับ desktop zero JS (ได้ keyboard + screen reader ฟรี) แทนที่เดิมมือถือไม่มีทางกระโดดหน้าเลย
(3) H3 typography ขยายเพื่อผู้ใช้สูงวัย + อักษรไทย — เนื้อหาแถวรายการ text-[13px]→text-sm, โน้ต/badge text-[11px]→text-xs, บรรทัดสรุปหน้า→text-sm, "หน้า" text-[10px]→text-[11px], แถบ action→text-sm (CollapsibleBlock รวม)
(4) M1 aria-label anchor สารบัญ "หน้า N, X รายการ" กัน screen reader อ่านเลขติดกัน / M2 sticky aside max-h overflow (เอกสารหลายสิบหน้าครึ่งล่างเคยกดไม่ได้ตลอดกาล) / M3 ปุ่ม "เปิดหน้านี้" แสดงตลอดไม่ซ่อนบนมือถือ / M4 "ส่งออก CSV"→"ส่งออกสรุป (CSV)" คู่กับ "ส่งออก Bookmark (JSON)" (คง terminology อังกฤษตาม b1bc65e) ถอด title tooltip ที่จอสัมผัสใช้ไม่ได้ / M5 generateMetadata ชื่อแท็บ browser "สรุปหมายเหตุ — ชื่อคดี | Judge's Note"
(5) L2 CollapsibleBlock เพิ่ม useId + aria-controls/id ครบ disclosure pattern / L3 empty state CTA ใช้ RING_CLS ร่วม / L4 @media print (globals.css): header แปลงกรอบเส้นน้ำเงิน #0033a1 กัน text ขาวบนกระดาษขาว + break-inside ไม่ผ่าการ์ดกลางหน้ากระดาษ + ซ่อนแถบ action/สารบัญมือถือ / L1 แก้ comment หัวไฟล์ให้ตรงความจริง (มี client component เดียวคือ CollapsibleBlock)

ปรับตามคำขอผู้ใช้ระหว่างทาง (2026-09-17): เนื้อหาเปลี่ยนจากแผ่นกระดาษแผ่นเดียวคั่นเส้นเป็นการ์ดรายหน้า 1 หน้า 1 การ์ด (flex flex-col gap-4) / สารบัญ desktop เป็นการ์ด sticky / action bar เปลี่ยนลิงก์ข้อความเปล่าเป็น ghost button ขาวมีขอบ ภาษาเดียวกับการ์ด

งานคู่ขนานจากอีก session ในไฟล์ชุดนี้: แยก TypeIcon ออกจาก sidebar เป็น components/AnnotationTypeIcon.tsx (ไม่มี "use client") ใช้ร่วม sidebar + หน้าสรุป + ถอดหัวข้อคำอธิบายออกจากหน้าสรุป

CLAUDE.md sync โครงสร้าง/พฤติกรรมหน้าสรุปล่าสุด

verify: tsc strict ผ่าน + vitest 139/139 ผ่าน

Co-Authored-By: Claude Code <noreply@anthropic.com>

components/sidebar/AnnotationSidebar.tsx

@@ -3,35 +3,25 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 import { createPortal } from "react-dom";
 import {
-  ArrowRight,
   Bookmark,
   Braces,
   Check,
   ChevronDown,
   ChevronRight,
-  Circle,
   Clock,
   Copy,
-  EyeOff,
-  Highlighter,
-  MessageSquare,
-  Minus,
   MoreHorizontal,
   Pencil,
   Plus,
   Search,
   SlidersHorizontal,
-  Square,
-  Stamp,
   StickyNote,
   Trash2,
-  Type,
-  Underline,
-  Strikethrough,
   X,
   type LucideIcon,
 } from "lucide-react";
 
+import { AnnotationTypeIcon } from "../AnnotationTypeIcon";
 import Select from "../Select";
 
 import {
@@ -46,10 +36,7 @@ import type {
   AnnotationDTO,
   BookmarkDTO,
   CommentData,
-  DrawData,
-  HighlightData,
   RedactionData,
-  ShapeData,
 } from "@/db/schema";
 import {
   annotationNote,
@@ -69,33 +56,6 @@ import { formatThaiDate } from "@/utils/date-format";
 const FOCUS_RING_CLS =
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1 focus-visible:z-10";
 
-function TypeIcon({ type, data }: { type: AnnotationDTO["type"]; data: AnnotationDTO["data"] }) {
-  const cls = "h-4 w-4 shrink-0 text-slate-500";
-  if (type === "HIGHLIGHT") {
-    const style = (data as HighlightData).style ?? "highlight";
-    if (style === "underline") return <Underline className={cls} />;
-    if (style === "strikethrough") return <Strikethrough className={cls} />;
-    return <Highlighter className={cls} />; // highlight / squiggle
-  }
-  if (type === "DRAW")
-    return (data as DrawData).pen === "highlighter" ? (
-      <Highlighter className={cls} />
-    ) : (
-      <Pencil className={cls} />
-    );
-  if (type === "REDACTION") return <EyeOff className={cls} />;
-  if (type === "TEXTBOX") return <Type className={cls} />;
-  if (type === "STAMP") return <Stamp className={cls} />;
-  if (type === "SHAPE") {
-    const shape = (data as ShapeData).shape;
-    if (shape === "rect") return <Square className={cls} />;
-    if (shape === "ellipse") return <Circle className={cls} />;
-    if (shape === "line") return <Minus className={cls} />;
-    return <ArrowRight className={cls} />;
-  }
-  return <MessageSquare className={cls} />;
-}
-
 /** ใส่/ล้างโน้ตคำอธิบายใน data ของ annotation (ทุกชนิดยกเว้น COMMENT — message ทำหน้าที่นี้แล้ว) */
 function withNote(data: Exclude<AnnotationData, CommentData>, note: string): AnnotationData {
   return note ? { ...data, note } : { ...data, note: undefined };
@@ -952,7 +912,7 @@ export default function AnnotationSidebar({
           onGoToAnnotation(a);
         }}
       >
-        <TypeIcon type={a.type} data={a.data} />
+        <AnnotationTypeIcon type={a.type} data={a.data} />
         <span className="min-w-0">
                     {/* UX audit: อักษรไทยมีสระ/วรรณยุกต์ซ้อนหลายชั้น — ข้อความหลักต้อง 13px
                         จึงอ่านได้สบาย (บรรทัดรอง/โน้ตคง 11px) */}