genesis+worker: design system Genesis ทั้งชุด + patch pdf.worker แก้ fake-space ไทย + ปิด review design/responsive/quality รอบ 2026-09-24 — (1) Genesis: ฟอนต์ General Sans self-host + DM Sans + Sarabun, AppNav 56px backdrop-blur แทน SessionBar, DotGrid หน้า login, palette/รัศมี/เงา/focus ตาม docs/DESIGN.md ครบทุกหน้า (2) postinstall scripts/patch-pdf-worker.mjs ถอด if (scaledDim) รอบ prevTransform ให้อัปเดตทุก glyph — กัน addFakeSpaces แทรก space กลางคำไทยใน PDF ที่ justify ด้วย letter-spacing + test กัน regression (tests/scripts/ + fixture thai_letterspacing.pdf, invariant #6) (3) ฟอร์มอัปโหลด + ช่องกลุ่ม typeId ทางเลือก — normDocumentGroup ที่ utils/external-file.ts เป็น single source ร่วมกับ N8 (4) token fixes: focus ring ปุ่ม pin + แถว bookmark ตามหน้า, ปุ่ม action ใน popup/composer/dialog เป็น rounded-md ทั้งคู่, selection preview เป็น tint ของ primary แทน blue-500 ดิบ, default สี shape/highlight รวมที่ utils/annotation-display, loading animate-pulse + จดข้อยกเว้น (เงา pin, font weights ของ viewer) ลง DESIGN.md (5) responsive: Export PDF max-lg:order-first ให้เห็นบน iPad, แถวบน header แถวเดียวเลื่อนได้บนจอแคบ, re-fit ความกว้างตอน toggle sidebar เฉพาะเมื่อยังไม่ซูมเอง, pin popover flip ขึ้นบนเมื่อใกล้ท้ายหน้า, toast hint ตอนสลับ tool กลางเอกสาร, ป้าย "ชนิด · ผู้ทำ" ของรายการผู้อื่นสำหรับจอสัมผัส (6) คุณภาพ: @layer ครอบ @media กันกฎ touch รั่ยไป desktop (Tailwind v3 ยก @layer ออกจาก media ทิ้ง wrapper — ยืนยันด้วย build จริง + วัดบนจอ), กฎ M5 ครอบ contenteditable กัน Safari zoom ตอนแก้ไข TEXTBOX บน iPad, COMMENT ใช้ box มาตราฐานเดียวตาม pin px จริง (render/scroll target/move-clamp/bookmark), ตัดหัวการ์ดซ้ำกับ h2 หน้ารายการ — พร้อมไฟล์ untracked ที่ postinstall/โค้ดอ้างถึงครบชุด (app/fonts/, AppNav, DotGrid, tests/) กัน fresh clone fail ที่ npm install (คำขอผู้ใช้ 2026-09-24)

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

app/groups/[typeId]/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { asc, eq, inArray } from "drizzle-orm";
 import {
   ArrowLeft,
@@ -13,6 +13,7 @@ import {
 } from "lucide-react";
 
 import { AnnotationTypeIcon } from "@/components/AnnotationTypeIcon";
+import AppNav from "@/components/AppNav";
 import { db } from "@/db";
 import {
   annotations,
@@ -30,6 +31,7 @@ import {
 } from "@/utils/annotation-display";
 import { formatThaiDate } from "@/utils/date-format";
 import { imageFormatFromUrl } from "@/utils/file-kind";
+import { getSessionUser } from "@/lib/session";
 
 // N9 (PLAN-DOCSET.md D3) — หน้ารวมเอกสารของกลุ่ม (type_id จากลิงก์ e-Court)
 // server component force-dynamic — login ถูกบังคับโดย middleware.ts อยู่แล้ว
@@ -53,9 +55,9 @@ function mergedItems(b: FileBucket) {
   );
 }
 
-/** focus ring ร่วมของลิงก์รายการในการ์ด (เดียวกับ RING_CLS ของหน้าสรุป) */
-const RING_CLS =
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1";
+/** focus ring ร่วมของลิงก์รายการในการ์ด — Genesis .focus-ring (outline น้ำเงินทึบ
+ *  2px + offset ตาม spec Elevation) เดียวกับหน้าสรุป */
+const RING_CLS = "focus-ring";
 
 export const dynamic = "force-dynamic";
 
@@ -74,6 +76,10 @@ export default async function GroupPage({
 }) {
   const { typeId } = params;
 
+  // AppNav ต้องการชื่อผู้ใช้ — defense ซ้อน middleware กัน render หน้าให้คนไม่มี session
+  const user = getSessionUser();
+  if (!user) redirect("/login");
+
   const rows = await db
     .select()
     .from(files)
@@ -118,166 +124,173 @@ export default async function GroupPage({
   const bookmarkById = new Map(bmDtos.map((b) => [b.id, b] as const));
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-10 sm:px-8">
-      <Link
-        href="/"
-        className="inline-flex items-center gap-1.5 text-sm text-slate-500 transition hover:text-primary"
-      >
-        <ArrowLeft className="h-4 w-4" />
-        หน้ารายการ
-      </Link>
+    <>
+      <AppNav userName={user.userName} />
+      {/* listing-page: hook ของกฎ coarse 44px ใน globals.css (อย่าถอด) */}
+      <main className="listing-page mx-auto max-w-3xl px-4 py-8 sm:px-6">
+        <Link
+          href="/"
+          className="focus-ring inline-flex items-center gap-1.5 rounded-md text-sm text-ink-soft transition hover:text-ink"
+        >
+          <ArrowLeft aria-hidden className="h-4 w-4" />
+          หน้ารายการ
+        </Link>
 
-      <header className="mt-4 flex items-center gap-3">
-        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10">
-          <Folder className="h-5 w-5 text-primary" />
+        <header className="mt-4 flex items-center gap-3">
+          <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-ink/[0.04]">
+            <Folder aria-hidden className="h-5 w-5 text-ink-soft" />
+          </div>
+          <div className="min-w-0">
+            <h1 className="font-display break-all text-section-title text-ink">
+              {typeId}
+            </h1>
+            <p className="mt-0.5 text-sm text-ink-soft">{rows.length} เอกสาร</p>
+          </div>
+        </header>
+
+        {/* หมายเหตุแสดงทุกครั้ง (แผน N9 D3): ระบบรู้จักเฉพาะเอกสารที่เคยเปิดผ่านลิงก์ e-Court
+            รายการครบทั้งคดีอยู่ใน e-Court ไม่ใช่ระบบนี้ — Genesis: แผงข้อมูลกลาง 8px radius
+            (น้ำเงินสงวนให้ของ interactive จึงเป็นเทาโปร่ง ไม่ใช่แบนเนอร์ฟ้า) */}
+        <div className="mt-4 rounded-lg border border-line bg-ink/[0.03] px-4 py-3 text-sm text-ink-soft">
+          แสดงเฉพาะเอกสารที่เคยเปิดในระบบนี้
         </div>
-        <div className="min-w-0">
-          <h1 className="break-all text-xl font-bold leading-tight text-primary">
-            {typeId}
-          </h1>
-          <p className="text-sm text-slate-500">{rows.length} เอกสาร</p>
-        </div>
-      </header>
 
-      {/* หมายเหตุแสดงทุกครั้ง (แผน N9 D3): ระบบรู้จักเฉพาะเอกสารที่เคยเปิดผ่านลิงก์ e-Court
-          รายการครบทั้งคดีอยู่ใน e-Court ไม่ใช่ระบบนี้ */}
-      <div className="mt-4 rounded-xl border border-blue-200 bg-blue-50 p-4 text-sm text-blue-800">
-        แสดงเฉพาะเอกสารที่เคยเปิดในระบบนี้
-      </div>
-
-      <ul className="mt-6 space-y-3">
-        {rows.map((f) => {
-          const bucket = byFile.get(f.id) ?? { anns: [], bms: [] };
-          const total = bucket.anns.length + bucket.bms.length;
-          return (
-            <li
-              key={f.id}
-              className="rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-primary/30 hover:shadow-md"
-            >
-              <div className="flex items-center gap-3">
-                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-                  {imageFormatFromUrl(f.pdfUrl) ? (
-                    <FileImage className="h-5 w-5 text-primary" />
-                  ) : (
-                    <FileText className="h-5 w-5 text-primary" />
-                  )}
+        <ul className="mt-6 space-y-4">
+          {rows.map((f) => {
+            const bucket = byFile.get(f.id) ?? { anns: [], bms: [] };
+            const total = bucket.anns.length + bucket.bms.length;
+            return (
+              <li
+                key={f.id}
+                className="rounded-xl border border-line bg-white p-5"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-ink/[0.04]">
+                    {imageFormatFromUrl(f.pdfUrl) ? (
+                      <FileImage aria-hidden className="h-5 w-5 text-ink-soft" />
+                    ) : (
+                      <FileText aria-hidden className="h-5 w-5 text-ink-soft" />
+                    )}
+                  </div>
+                  <span className="min-w-0 flex-1">
+                    <span className="block break-all line-clamp-2 text-body font-medium text-ink">
+                      {f.title}
+                    </span>
+                    {/* วันที่/จำนวนเป็นข้อมูลที่อ่านจริง ใช้ ink-soft (ผ่าน 4.5:1) —
+                        ink-faint เก็บไว้ให้ placeholder/disabled เท่านั้น (UX review M2) */}
+                    <span className="mt-0.5 block text-caption text-ink-soft">
+                      นำเข้า {formatThaiDate(f.createdAt, true)} · Annotations{" "}
+                      {bucket.anns.length} · Bookmarks {bucket.bms.length}
+                    </span>
+                  </span>
+                  <Link
+                    href={`/annotate/${f.id}`}
+                    className="focus-ring inline-flex h-8 shrink-0 items-center rounded-md border border-line px-3 text-sm font-medium text-ink transition hover:-translate-y-px hover:border-ink-faint"
+                  >
+                    Annotate
+                  </Link>
                 </div>
-                <span className="min-w-0 flex-1">
-                  <span className="block break-all line-clamp-2 text-sm font-medium text-slate-900">
-                    {f.title}
-                  </span>
-                  <span className="mt-0.5 block text-xs text-slate-500">
-                    นำเข้า {formatThaiDate(f.createdAt, true)} · Annotations{" "}
-                    {bucket.anns.length} · Bookmarks {bucket.bms.length}
-                  </span>
-                </span>
-                <Link
-                  href={`/annotate/${f.id}`}
-                  className="shrink-0 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white transition hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
-                >
-                  Annotate
-                </Link>
-              </div>
 
-              {total > 0 && (
-                <details className="group mt-3 border-t border-slate-100">
-                  <summary className="flex cursor-pointer list-none items-center justify-between rounded-md px-1 py-2 text-sm font-medium text-slate-700 transition hover:text-primary [&::-webkit-details-marker]:hidden">
-                    Annotations &amp; Bookmarks ({total})
-                    <ChevronDown
-                      aria-hidden
-                      className="h-4 w-4 shrink-0 text-slate-400 transition-transform group-open:rotate-180 motion-reduce:transition-none"
-                    />
-                  </summary>
-                  <ul className="divide-y divide-slate-100">
-                    {mergedItems(bucket).map((item) => {
-                      const parent =
-                        item.kind === "bm" && item.dto.parentId
-                          ? bookmarkById.get(item.dto.parentId)
-                          : undefined;
-                      return item.kind === "bm" ? (
-                        <li key={item.dto.id}>
-                          <Link
-                            href={`/annotate/${f.id}?page=${item.pageIndex + 1}`}
-                            className={`-mx-2 flex items-start gap-2 rounded-lg px-2 py-2.5 transition hover:bg-slate-50 ${RING_CLS}`}
-                          >
-                            <Bookmark
-                              aria-hidden
-                              className="mt-1 h-4 w-4 shrink-0 text-amber-500"
-                            />
-                            <span className="min-w-0 flex-1">
-                              <span className="block whitespace-pre-wrap break-words text-sm font-medium leading-snug text-slate-800">
-                                {item.dto.title}
-                              </span>
-                              <span className="mt-0.5 block truncate text-xs text-slate-500">
-                                หน้า {item.pageIndex + 1} ·{" "}
-                                {formatThaiDate(item.dto.createdAt, true)} · โดย{" "}
-                                {item.dto.userName || "ไม่ทราบชื่อ"}
-                                {parent ? ` · ใน: ${parent.title}` : ""}
-                              </span>
-                              {item.dto.note && (
-                                <span className="mt-0.5 flex items-start gap-1 text-xs leading-relaxed text-slate-500">
-                                  <StickyNote
-                                    aria-hidden
-                                    className="mt-0.5 h-3 w-3 shrink-0 text-amber-400"
-                                  />
-                                  <span className="line-clamp-2 whitespace-pre-wrap break-words">
-                                    {item.dto.note}
-                                  </span>
+                {total > 0 && (
+                  <details className="group mt-3 border-t border-line/70">
+                    <summary className="flex cursor-pointer list-none items-center justify-between rounded-md px-1 py-2.5 text-sm font-medium text-ink-soft transition hover:text-primary [&::-webkit-details-marker]:hidden">
+                      Annotations &amp; Bookmarks ({total})
+                      <ChevronDown
+                        aria-hidden
+                        className="h-4 w-4 shrink-0 text-ink-faint transition-transform group-open:rotate-180 motion-reduce:transition-none"
+                      />
+                    </summary>
+                    <ul className="divide-y divide-line/70">
+                      {mergedItems(bucket).map((item) => {
+                        const parent =
+                          item.kind === "bm" && item.dto.parentId
+                            ? bookmarkById.get(item.dto.parentId)
+                            : undefined;
+                        return item.kind === "bm" ? (
+                          <li key={item.dto.id}>
+                            <Link
+                              href={`/annotate/${f.id}?page=${item.pageIndex + 1}`}
+                              className={`-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">
+                                  {item.dto.title}
                                 </span>
-                              )}
-                            </span>
-                          </Link>
-                        </li>
-                      ) : (
-                        <li key={item.dto.id}>
-                          <Link
-                            href={`/annotate/${f.id}?ann=${item.dto.id}`}
-                            className={`-mx-2 flex items-start gap-2 rounded-lg px-2 py-2.5 transition hover:bg-slate-50 ${RING_CLS}`}
-                          >
-                            <AnnotationTypeIcon
-                              type={item.dto.type}
-                              data={item.dto.data}
-                              className="mt-1 h-4 w-4 shrink-0 text-slate-500"
-                            />
-                            <span className="min-w-0 flex-1">
-                              <span className="block whitespace-pre-wrap break-words text-sm leading-snug text-slate-800">
-                                {annotationPreviewText(item.dto)}
-                                {item.dto.type === "COMMENT" &&
-                                  item.dto.resolved && (
-                                    <span className="ml-1.5 whitespace-nowrap rounded border border-emerald-600/50 bg-emerald-50 px-1.5 py-0.5 text-xs text-emerald-700">
-                                      จัดการแล้ว
+                                <span className="mt-0.5 block truncate text-xs text-ink-soft">
+                                  หน้า {item.pageIndex + 1} ·{" "}
+                                  {formatThaiDate(item.dto.createdAt, true)} · โดย{" "}
+                                  {item.dto.userName || "ไม่ทราบชื่อ"}
+                                  {parent ? ` · ใน: ${parent.title}` : ""}
+                                </span>
+                                {item.dto.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">
+                                      {item.dto.note}
                                     </span>
-                                  )}
-                              </span>
-                              <span className="mt-0.5 block text-xs text-slate-500">
-                                หน้า {item.pageIndex + 1} ·{" "}
-                                {annotationTypeLabel(item.dto)} ·{" "}
-                                {formatThaiDate(item.dto.createdAt, true)} · โดย{" "}
-                                {item.dto.userName}
-                              </span>
-                              {annotationNote(item.dto) && (
-                                <span className="mt-0.5 flex items-start gap-1 text-xs leading-relaxed text-slate-500">
-                                  <StickyNote
-                                    aria-hidden
-                                    className="mt-0.5 h-3 w-3 shrink-0 text-amber-400"
-                                  />
-                                  <span className="line-clamp-2 whitespace-pre-wrap break-words">
-                                    {annotationNote(item.dto)}
                                   </span>
+                                )}
+                              </span>
+                            </Link>
+                          </li>
+                        ) : (
+                          <li key={item.dto.id}>
+                            <Link
+                              href={`/annotate/${f.id}?ann=${item.dto.id}`}
+                              className={`-mx-2 flex items-start gap-2 rounded-lg px-2 py-2.5 transition hover:bg-ink/[0.03] ${RING_CLS}`}
+                            >
+                              <AnnotationTypeIcon
+                                type={item.dto.type}
+                                data={item.dto.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(item.dto)}
+                                  {item.dto.type === "COMMENT" &&
+                                    item.dto.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>
-                          </Link>
-                        </li>
-                      );
-                    })}
-                  </ul>
-                </details>
-              )}
-            </li>
-          );
-        })}
-      </ul>
-    </main>
+                                <span className="mt-0.5 block text-xs text-ink-soft">
+                                  หน้า {item.pageIndex + 1} ·{" "}
+                                  {annotationTypeLabel(item.dto)} ·{" "}
+                                  {formatThaiDate(item.dto.createdAt, true)} · โดย{" "}
+                                  {item.dto.userName}
+                                </span>
+                                {annotationNote(item.dto) && (
+                                  <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(item.dto)}
+                                    </span>
+                                  </span>
+                                )}
+                              </span>
+                            </Link>
+                          </li>
+                        );
+                      })}
+                    </ul>
+                  </details>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      </main>
+    </>
   );
 }