From bc8ba83deb8a5fcdc5f4c12f4e3e37cbba30568f Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 16 Sep 2026 16:52:08 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AB=E0=B8=99=E0=B9=89=E0=B8=B2=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3:=20=E0=B9=81?=
 =?UTF-8?q?=E0=B8=A2=E0=B8=81=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=B1=E0=B8=9B=E0=B9=82=E0=B8=AB=E0=B8=A5=E0=B8=94?=
 =?UTF-8?q?=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99=20section=20"=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=E0=B9=80=E0=B8=AD=E0=B8=81?=
 =?UTF-8?q?=E0=B8=AA=E0=B8=B2=E0=B8=A3"=20=E0=B8=82=E0=B8=AD=E0=B8=87?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B1=E0=B8=A7=E0=B9=80=E0=B8=AD=E0=B8=87=20(?=
 =?UTF-8?q?=E0=B9=80=E0=B8=94=E0=B8=B4=E0=B8=A1=E0=B8=AD=E0=B8=A2=E0=B8=B9?=
 =?UTF-8?q?=E0=B9=88=E0=B9=83=E0=B8=95=E0=B9=89=E0=B8=AB=E0=B8=B1=E0=B8=A7?=
 =?UTF-8?q?=20"=E0=B9=80=E0=B8=AD=E0=B8=81=E0=B8=AA=E0=B8=B2=E0=B8=A3"=20?=
 =?UTF-8?q?=E0=B8=94=E0=B8=B9=E0=B9=80=E0=B8=AB=E0=B8=A1=E0=B8=B7=E0=B8=AD?=
 =?UTF-8?q?=E0=B8=99=E0=B8=AA=E0=B9=88=E0=B8=A7=E0=B8=99=E0=B9=80=E0=B8=94?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=A7=E0=B8=81=E0=B8=B1=E0=B8=9A=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A2=E0=B8=81=E0=B8=B2=E0=B8=A3)=20+=20=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=81=E0=B8=8A=E0=B8=99=E0=B8=B4=E0=B8=94=E0=B9=84?=
 =?UTF-8?q?=E0=B8=9F=E0=B8=A5=E0=B9=8C=E0=B8=97=E0=B8=B5=E0=B9=88=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=87=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B9=83=E0=B8=95?=
 =?UTF-8?q?=E0=B9=89=E0=B8=9F=E0=B8=AD=E0=B8=A3=E0=B9=8C=E0=B8=A1=20(PDF,?=
 =?UTF-8?q?=20JPG,=20PNG,=20TIFF=20=E2=80=94=20=E0=B9=84=E0=B8=A1=E0=B9=88?=
 =?UTF-8?q?=E0=B9=80=E0=B8=81=E0=B8=B4=E0=B8=99=20100MB=20=E0=B8=95?=
 =?UTF-8?q?=E0=B9=88=E0=B8=AD=E0=B9=84=E0=B8=9F=E0=B8=A5=E0=B9=8C)=20+=20?=
 =?UTF-8?q?=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=8C=E0=B8=94=E0=B9=84=E0=B8=9F?=
 =?UTF-8?q?=E0=B8=A5=E0=B9=8C=E0=B8=81=E0=B8=A5=E0=B8=B1=E0=B8=9A=E0=B9=80?=
 =?UTF-8?q?=E0=B8=9B=E0=B9=87=E0=B8=99=E0=B8=9B=E0=B8=B8=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20"Annotate"=20=E0=B9=81=E0=B8=97=E0=B8=99=E0=B8=A5=E0=B8=B4?=
 =?UTF-8?q?=E0=B8=87=E0=B8=81=E0=B9=8C=E0=B8=81=E0=B8=B2=E0=B8=87=E0=B9=80?=
 =?UTF-8?q?=E0=B8=95=E0=B9=87=E0=B8=A1=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B9=8C?=
 =?UTF-8?q?=E0=B8=94=20(=E0=B8=A2=E0=B9=89=E0=B8=AD=E0=B8=99=20M4=20?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B2=E0=B8=A1=20feedback)=20=E0=B9=80=E0=B8=9B?=
 =?UTF-8?q?=E0=B9=89=E0=B8=B2=E0=B8=88=E0=B8=B4=E0=B9=89=E0=B8=A1=2036px?=
 =?UTF-8?q?=20+=20focus=20ring?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 app/page.tsx                  | 21 ++++++++++++---------
 components/UploadFileForm.tsx |  3 +++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 72f099c..64f2e83 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { asc } from "drizzle-orm";
-import { ChevronRight, FileImage, FileText } from "lucide-react";
+import { FileImage, FileText } from "lucide-react";
 
 import { db } from "@/db";
 import { files } from "@/db/schema";
@@ -45,13 +45,17 @@ export default async function HomePage() {
 
       <UserPicker />
 
+      <section className="mt-8">
+        <h2 className="text-sm font-semibold text-slate-700">เพิ่มเอกสาร</h2>
+        <UploadFileForm />
+      </section>
+
       <div className="mt-8 flex items-baseline justify-between">
         <h2 className="text-sm font-semibold text-slate-700">เอกสาร</h2>
         {rows.length > 0 && (
           <span className="text-xs tabular-nums text-slate-500">{rows.length} ไฟล์</span>
         )}
       </div>
-      <UploadFileForm />
 
       {rows.length === 0 ? (
         <div className="mt-3 rounded-xl border border-dashed border-slate-300 bg-white/60 p-10 text-center">
@@ -68,7 +72,7 @@ export default async function HomePage() {
           {rows.map((f) => (
             <li
               key={f.id}
-              className="group relative flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-primary/30 hover:shadow-md"
+              className="group flex items-center gap-3 rounded-xl border border-slate-200 bg-white p-4 shadow-sm transition hover:border-primary/30 hover:shadow-md"
             >
               <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
                 {imageFormatFromUrl(f.pdfUrl) ? (
@@ -88,14 +92,13 @@ export default async function HomePage() {
                   {new Date(f.createdAt).toLocaleString("th-TH")}
                 </span>
               </span>
-              <ChevronRight aria-hidden className="h-4 w-4 shrink-0 text-slate-400" />
-              {/* M4 (UX audit 2026-09-16): ลิงก์กางเต็มการ์ด — จอสัมผัสจิ้มตรงไหนก็เข้าได้
-                  (เดิมปุ่ม "Annotate" ~30px อย่างเดียว และเป็นภาษาอังกฤษใน UI ไทย) */}
+              {/* ปุ่มเข้า annotate แทนลิงก์กางเต็มการ์ด (M4) ตาม feedback — เป้าจิ้ม 36px (H4) */}
               <Link
                 href={`/annotate/${f.id}`}
-                className="absolute inset-0 rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-1"
-                aria-label={`เปิด ${f.title}`}
-              />
+                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>
             </li>
           ))}
         </ul>
diff --git a/components/UploadFileForm.tsx b/components/UploadFileForm.tsx
index ed5efab..e9daa62 100644
--- a/components/UploadFileForm.tsx
+++ b/components/UploadFileForm.tsx
@@ -62,6 +62,9 @@ export default function UploadFileForm() {
       >
         {pending ? "กำลังอัปโหลด…" : "อัปโหลด"}
       </button>
+      <p className="w-full text-xs text-slate-500">
+        รองรับ PDF, JPG, PNG, TIFF — ไม่เกิน 100MB ต่อไฟล์
+      </p>
       {error && <p className="w-full text-xs text-red-600">{error}</p>}
     </form>
   );