เพิ่มตัวเลือก mock user 10 คนที่หน้าแรก + ปรับหน้าแรก + select ลูกศรเองทั่วแอป

- utils/user.ts: MOCK_USERS (userId คงที่) + setLocalUser/getStoredLocalUser
  เขียนลง localStorage key เดิม — PDFViewer อ่าน getLocalUser() เหมือนเดิม
- components/UserPicker.tsx: dropdown เลือกผู้ใช้ก่อนเข้า annotate
  (ยังไม่มี identity = default คนแรก, identity สุ่มเดิมแสดงเป็น option ชั่วคราว)
- components/Select.tsx: select ถอดลูกศร native (ชิดขอบ) ใส่ ChevronDown เอง
  ใช้ที่ UserPicker + ตัวกรองรายคน + เลือกหัวข้อ bookmark 2 จุด
- app/page.tsx: header monogram, การ์ดไฟล์ hover, empty state ใหม่

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

components/UserPicker.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+// เลือก mock user ที่หน้าแรกก่อนเข้า annotate — เขียนลง localStorage key เดิม
+// ที่ getLocalUser() อ่าน (PDFViewer ไม่ต้องแก้อะไร)
+import { useEffect, useState } from "react";
+
+import Select from "./Select";
+import {
+  MOCK_USERS,
+  getStoredLocalUser,
+  setLocalUser,
+  type LocalUser,
+} from "@/utils/user";
+
+export default function UserPicker() {
+  const [current, setCurrent] = useState<LocalUser | null>(null);
+
+  // ต้องรันใน effect เพราะ SSR ไม่มี localStorage — ก่อน mount แสดงคนแรกไว้ก่อน
+  useEffect(() => {
+    const stored = getStoredLocalUser();
+    if (!stored) {
+      // ยังไม่เคยมี identity → เริ่มด้วย mock user คนแรก
+      setLocalUser(MOCK_USERS[0]);
+      setCurrent(MOCK_USERS[0]);
+      return;
+    }
+    setCurrent(stored);
+  }, []);
+
+  // identity สุ่มเดิมไม่อยู่ในรายการ mock → แสดงเป็น option ชั่วคราวให้เห็นว่าปัจจุบันคือใคร
+  const isMock = current !== null && MOCK_USERS.some((u) => u.userId === current.userId);
+
+  const select = (userId: string) => {
+    const user = MOCK_USERS.find((u) => u.userId === userId);
+    if (!user) return;
+    setLocalUser(user);
+    setCurrent(user);
+  };
+
+  return (
+    <section className="mt-6 rounded-lg border bg-white p-4 shadow-sm">
+      <h2 className="text-sm font-semibold text-primary">เลือกผู้ใช้ (mock)</h2>
+      <p className="mt-0.5 text-xs text-slate-400">
+        annotation ทั้งหมดจะบันทึกในชื่อผู้ใช้ที่เลือก
+      </p>
+      <Select
+        value={current ? (isMock ? current.userId : "") : MOCK_USERS[0].userId}
+        onChange={(e) => {
+          if (e.target.value) select(e.target.value);
+        }}
+        className="mt-3 block w-full rounded-md border bg-white py-2 pl-3 text-sm"
+      >
+        {current && !isMock && (
+          <option value="" disabled>
+            {current.userName} (สุ่มอัตโนมัติ)
+          </option>
+        )}
+        {MOCK_USERS.map((u) => (
+          <option key={u.userId} value={u.userId}>
+            {u.userName}
+          </option>
+        ))}
+      </Select>
+    </section>
+  );
+}