@suphark/ui 0.27.1 → 0.29.0

package/CHANGELOG.md

@@ -2,6 +2,40 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.29.0] — 2026-10-05
+
+### Added
+
+- `InlineEdit`: คุมโหมดแก้ไขจากข้างนอกได้ — `editing` + `onEditingChange` (controlled), `defaultEditing` และ `onCancel` (กด Esc/✕) สำหรับแอปที่เข้าโหมดแก้ไขด้วย F2 หรือเมนูคลิกขวา "เปลี่ยนชื่อ" (คำขอจาก Pi Files — เดิมต้อง `.click()` ปุ่มดินสอผ่าน DOM)
+- **`@suphark/ui/sortable` — ลากจัดลำดับ 2 ระดับ (กลุ่ม + รายการในกลุ่ม)** entry ใหม่บน dnd-kit (แยกจาก barrel เหมือน `data-table`/`kanban` เพราะ dnd-kit สร้าง context ตอน import) — ยกสมองส่วนลากออกจากแอป ส่วนการเรนเดอร์แถวยังเป็นของแอป (ตาราง/การ์ด/รายการ) ตามสเปกของ Pi Config (`values-table.tsx`)
+  - `SortableProvider` — sensors (เมาส์ + คีย์บอร์ด), collision ที่กันลากข้ามชนิด (กลุ่มชนได้แค่กลุ่ม, รายการชนได้แค่รายการกับที่วางของกลุ่ม), ย้ายข้ามกลุ่มระหว่างลาก, commit ตอนปล่อย และ **คืนลำดับเดิมอัตโนมัติเมื่อบันทึกล้มเหลว** (throw หรือ `{ ok: false, error }`) — ไม่มี `onCommitError` = ขึ้น toast ให้; ส่งมา = ส่ง error ดิบให้แอปจัดการเอง ไม่กลืนเงียบ
+  - `SortableGroup` (ขอบเขตการเรียงของกลุ่ม), `useSortableRow({ type, id })` → `{ ref, style, handleProps, isDragging }`, `useSortableDropZone(groupId)` (แปะที่ไหนก็ได้ — หัวกลุ่ม หรือแถว placeholder ของกลุ่มที่ไม่มีหัว; กลุ่มที่ย่ออยู่ก็ยังรับการวางได้), `useSortableState()` → `{ dragging, disabled }`, `DragHandle` (ใช้ `Button` ของแพ็กเกจ จึงได้ tooltip จาก `aria-label`; ปิดการลากแล้วที่จับจางลงเอง หรือซ่อนไปเลยด้วย `hideWhenDisabled`)
+  - `announcements` + `screenReaderInstructions` ส่งเป็น prop ได้ (callback ได้ `{ id, kind, groupId, index, total }` ให้แอปประกอบข้อความจากชื่อจริง) ไม่ส่ง = แม่แบบจาก `UiText.sortable`
+  - helper แบบ pure ใน `lib/sortable-order`: `sortableOrderOf`, `reorderGroups`, `reorderItems`, `moveItemToGroup`, `groupOfItem`, `sameOrder`, `moveWithin`, `sortableOrderToPayload` (คืน `{ groups: string[], items: [{ groupId: string | null, itemIds }] }` — ลำดับกลุ่มกับรายการในกลุ่มครบในก้อนเดียว, `UNGROUPED` → `null`)
+- `UiText.sortable` — `handle`, `instructions`, `started`, `moved`, `dropped`, `cancelled` (`{index}` / `{total}`)
+- showcase: หน้า `/components/sortable-list` — ตาราง 2 ระดับ ลากเรียงกลุ่ม/คีย์/ย้ายข้ามกลุ่ม พร้อมแถว "ลากมาที่นี่เพื่อเอาออกจากกลุ่ม" ที่โผล่เฉพาะตอนลากคีย์
+
+## [0.28.1] — 2026-10-05
+
+### Fixed
+
+- **`AppShell` ปุ่มย่อ/ขยายเมนูยังมี "Toggle Sidebar" อังกฤษค้างอยู่ใน `sr-only`** (รายงานจาก DueBell): `SidebarTrigger` ของ shadcn ฝังข้อความนั้นเป็น children ซึ่งแทนด้วย props ไม่ได้ (JSX children ชนะ) — 0.27.1 เปลี่ยนได้แค่ `aria-label` ตอนนี้ `AppShell` เรนเดอร์ปุ่มเองจาก `Button` ของแพ็กเกจ + `useSidebar()` จึงใช้ `UiText.toggleSidebar` ทั้งชื่อและ tooltip และไม่มีข้อความอังกฤษเหลือในปุ่ม (ยังคง `data-sidebar="trigger"` ไว้ให้ selector เดิมใช้ได้)
+
+## [0.28.0] — 2026-10-05
+
+### Added
+
+- **`ActivityFeed`** — เส้นเวลา "ใครทำอะไรเมื่อไหร่" จาก array เดียว (audit log ของ Pi Auth, ประวัติงานของ Pi Done, timeline ของเอกสาร): avatar ของผู้ทำหรือไอคอน+โทนสำหรับเหตุการณ์ของระบบ, เวลาสัมพัทธ์ที่คำนวณฝั่ง client หลัง mount (ไม่ทำ hydration mismatch) และช่องใส่ปุ่ม/ป้ายท้ายแถว
+- **`InlineEdit`** — แก้ค่าในที่: คลิกดินสอ → ช่องกรอก (เลือกข้อความเดิมไว้ให้พิมพ์ทับได้ทันที) → Enter/✓ บันทึก, Esc/✕ ยกเลิก พร้อม `validate`, สถานะกำลังบันทึก และ toast เมื่อล้มเหลว (ถือ `{ ok: false, error }` เป็นล้มเหลว, `redirect()` เป็นสำเร็จ) — ใช้กับค่าสั้น ๆ ที่ไม่คุ้มเปิด `FormDialog`
+- **`SelectionBar`** — แถบคำสั่งหมู่ "เลือก N รายการ" + ปุ่มคำสั่ง + ปุ่มล้าง (`floating` กลางล่างจอ หรือ `inline` ในหน้า) ใช้คู่ `DataTable` หรือ `SimpleTable`; ข้อความจาก `UiText.selection`
+- **`SimpleTable` เลือกหลายแถวได้** — `selected` + `onSelectedChange` เปิดช่องติ๊กหน้าแถวและหัวตาราง (เลือกบางส่วนแสดงเป็นขีด), แถวที่เลือกมีพื้นจาง; คลิกช่องติ๊กไม่ไปโดน `onRowClick`
+- `SimpleTabs`: แท็บล้นความกว้างแล้วเลื่อนแนวนอนได้ (ซ่อนแถบเลื่อน) + เงาขอบบอกว่ายังมีแท็บต่อ
+- `UiText` คีย์ใหม่: `edit`, `selection.{selected,clear}`, `table.{rowsPerPage,pageOf,rowsSelected,noResults,deleteTitle,deleteDescription,deleting,deleted,delete}`
+
+### Fixed
+
+- **`DataTable` เลิกใช้ข้อความอังกฤษตายตัว** — "Rows per page", "Page X of Y", "N of M row(s) selected", "No results.", เมนู Edit/Delete, กล่องยืนยันลบ และ toast ตอนลบ ทั้งหมดมาจาก `UiText.table` (ค่าเริ่มต้นภาษาไทย) — `resourceName` แทรกผ่าน `{resource}`
+
 ## [0.27.1] — 2026-10-05
 
 ### Added

package/README.md

@@ -197,6 +197,32 @@ webview/automation บางตัวปิด `window.confirm` ทิ้ง (
 
 ต้องการ `alert` / `prompt` / `choose` (หลายปุ่ม) / `checklist` ด้วย หรือไม่อยาก render `confirmDialog` ทุกที่: ครอบ `<DialogsProvider>` ที่ root แล้ว `const dialogs = useDialogs()` — `await dialogs.prompt({ description: "ชื่อใหม่", defaultValue })` คืน string หรือ null; หัว/ปุ่มค่าเริ่มต้นจาก `UiText.ok/alertTitle/promptTitle/chooseTitle/checklistTitle`
 
+### ลากจัดลำดับ (`@suphark/ui/sortable`)
+
+ลากเรียงกลุ่ม เรียงรายการในกลุ่ม และย้ายรายการข้ามกลุ่ม ในตาราง/รายการเดียวกัน — แพ็กเกจดูแล sensors, collision, การย้ายระหว่างลาก และ **คืนลำดับเดิมให้เองเมื่อบันทึกไม่สำเร็จ** ส่วนการเรนเดอร์แถวยังเป็นของแอป
+
+```tsx
+const [order, setOrder] = useState(() =>
+  sortableOrderOf(groups, items, { groupId: (g) => g.id, itemId: (i) => i.id, itemGroupId: (i) => i.groupId }),
+);
+
+<SortableProvider order={order} onOrderChange={setOrder} onCommit={(next) => saveOrder(sortableOrderToPayload(next))}>
+  <SortableGroup itemIds={order.items[groupId] ?? []}>
+    {/* แต่ละแถว: const row = useSortableRow({ type: "item", id }); */}
+    <TableRow ref={row.ref} style={row.style}>
+      <TableCell><DragHandle label={`ลาก ${item.name}`} {...row.handleProps} /></TableCell>
+      …
+    </TableRow>
+  </SortableGroup>
+</SortableProvider>
+```
+
+- กลุ่มที่ไม่มีหัวกลุ่ม (เช่น "ยังไม่จัดกลุ่ม") ใช้ `useSortableDropZone(groupId)` แปะกับแถว placeholder ของตัวเอง และดูว่าควรแสดงเมื่อไหร่จาก `useSortableState().dragging`
+- `onCommit` ล้มเหลว (throw หรือ `{ ok: false, error }`) = คืนลำดับเดิม + toast; ถ้าอยากจัดการ error เองใส่ `onCommitError`
+- `sortableOrderToPayload(order)` คืน `{ groups, items }` — `groups` คือลำดับของกลุ่ม, `items` คือรายการในแต่ละกลุ่มเรียงตามนั้น (ของที่ยังไม่มีกลุ่มมาก่อนด้วย `groupId: null`)
+- `SortableProvider disabled` (เช่นระหว่างกรอง ซึ่งลำดับที่เห็นไม่ใช่ลำดับจริง) ทำให้ `DragHandle` จางลงและกดไม่ได้ — ไม่อยากให้เห็นเลยใส่ `hideWhenDisabled`
+- ข้อความ screen reader: ใส่ `announcements`/`screenReaderInstructions` เป็น prop (callback ได้ `{ id, kind, groupId, index, total }`) หรือปล่อยให้ใช้แม่แบบจาก `UiText.sortable`
+
 ### PWA (`@suphark/ui/pwa`)
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.27.1",
+  "version": "0.29.0",
   "private": false,
   "type": "module",
   "description": "Design system กลางของ Suphark apps: shadcn/ui (base-nova, Base UI, Tailwind v4) + shared components + token/ฟอนต์ Noto Sans Thai Looped — ส่งเป็น source ให้แอป Next transpile เอง",
@@ -44,6 +44,7 @@
     "./data-table": "./src/data-table.ts",
     "./pwa": "./src/pwa.ts",
     "./kanban": "./src/kanban.ts",
+    "./sortable": "./src/sortable.ts",
     "./styles.css": "./src/styles.css",
     "./components/shared/button": "./src/components/shared/button/index.ts",
     "./components/shared/theme": "./src/components/shared/theme/index.ts",

package/src/components/app-shell/app-shell.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { SimpleTooltip } from "@suphark/ui/components/shared/simple-tooltip";
+import { Button } from "@suphark/ui/components/shared/button/button";
 import { SkipLink } from "@suphark/ui/components/shared/skip-link";
 import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
@@ -18,11 +18,10 @@ import {
   SidebarInset,
   SidebarProvider,
   SidebarRail,
-  SidebarTrigger,
   useSidebar,
 } from "@suphark/ui/components/ui/sidebar";
 import { cn } from "@suphark/ui/lib/utils";
-import { Search, X } from "lucide-react";
+import { PanelLeftIcon, Search, X } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import {
@@ -78,7 +77,7 @@ export interface AppShellProps {
   /** ท้าย sidebar — ปกติคือ `<UserMenu variant="sidebar" />` */
   sidebarFooter?: ReactNode;
   /**
-   * header ของเนื้อหา: `false` = ไม่มี header, `true`/ไม่ส่ง = SidebarTrigger + breadcrumb อัตโนมัติ
+   * header ของเนื้อหา: `false` = ไม่มี header, `true`/ไม่ส่ง = ปุ่มย่อ/ขยายเมนู + breadcrumb อัตโนมัติ
    * ส่ง object เพื่อกำหนดเอง
    */
   header?:
@@ -207,9 +206,7 @@ function SidebarShell({
               )}
             >
               <div className="flex h-12 min-w-0 flex-1 items-center gap-2 md:h-full">
-                <SimpleTooltip content={toggleSidebarLabel}>
-                  <SidebarTrigger className="-ml-1" aria-label={toggleSidebarLabel} />
-                </SimpleTooltip>
+                <SidebarToggle label={toggleSidebarLabel} />
                 {breadcrumbs && (
                   <>
                     <Separator orientation="vertical" className="mr-2 hidden h-4 md:block" />
@@ -357,6 +354,28 @@ function TopShell({
   );
 }
 
+/**
+ * ปุ่มย่อ/ขยายเมนูในหัวเรื่อง — เขียนเองแทน `SidebarTrigger` ของ shadcn เพราะตัวนั้นฝัง
+ * `<span className="sr-only">Toggle Sidebar</span>` เป็นภาษาอังกฤษไว้ใน children (แทนไม่ได้
+ * เพราะ JSX children ชนะ props) ตัวนี้ใช้ `UiText` และได้ tooltip จาก `Button` ของแพ็กเกจ
+ * คง `data-sidebar="trigger"` ไว้ให้แอปที่ยิง selector เดิมยังใช้ได้
+ */
+function SidebarToggle({ label }: { label: string }) {
+  const { toggleSidebar } = useSidebar();
+  return (
+    <Button
+      data-sidebar="trigger"
+      variant="ghost"
+      size="icon-sm"
+      aria-label={label}
+      className="-ml-1"
+      onClick={toggleSidebar}
+    >
+      <PanelLeftIcon />
+    </Button>
+  );
+}
+
 /** แผง sidebar — แยกเพื่อใช้ useSidebar (ล้างคำค้นเมื่อยุบ ไม่ให้เมนูถูกกรองทั้งที่มองไม่เห็นช่องค้นหา) */
 function ShellSidebar({
   brand,

package/src/components/data-table/data-table-pagination.tsx

@@ -36,13 +36,16 @@ export function DataTablePagination<TData>({
     >
       {isRowSelectionEnabled && (
         <div className="flex-1 text-muted-foreground text-sm max-sm:text-center">
-          {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
+          {(text.table?.rowsSelected ?? "เลือก {selected} จาก {total} แถว")
+            .replace("{selected}", String(table.getFilteredSelectedRowModel().rows.length))
+            .replace("{total}", String(table.getFilteredRowModel().rows.length))}
         </div>
       )}
       <div className="flex flex-wrap items-center justify-center gap-4 sm:gap-6 lg:gap-8">
         <div className="flex items-center gap-2">
-          <p className="font-medium text-sm max-sm:hidden">Rows per page</p>
+          <p className="font-medium text-sm max-sm:hidden">
+            {text.table?.rowsPerPage ?? "แถวต่อหน้า"}
+          </p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
@@ -66,7 +69,9 @@ export function DataTablePagination<TData>({
           </Select>
         </div>
         <div className="flex w-[100px] items-center justify-center font-medium text-sm">
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+          {(text.table?.pageOf ?? "หน้า {page} จาก {pages}")
+            .replace("{page}", String(table.getState().pagination.pageIndex + 1))
+            .replace("{pages}", String(table.getPageCount()))}
         </div>
         <div className="flex items-center gap-2">
           <Button

package/src/components/data-table/data-table-row-actions.tsx

@@ -76,6 +76,10 @@ export function DataTableRowActions<TData>({
   idKey = "id" as keyof TData,
 }: DataTableRowActionsProps<TData>) {
   const text = useUiText();
+  // ชื่อชนิดข้อมูล (เช่น "โปรเจกต์") แทรกในข้อความลบ — ไม่ส่งมา = ข้อความไม่มีคำนี้
+  const resource = resourceName ? ` ${resourceName}` : "";
+  const fill = (template: string, name: string) =>
+    template.replace("{resource}", resource).replace("{name}", name);
   const item = row.original;
   const itemRecord = item as Record<string, unknown>;
   const itemName = String(
@@ -96,8 +100,8 @@ export function DataTableRowActions<TData>({
       });
 
       toast.promise(promise, {
-        loading: `Deleting ${resourceName.toLowerCase()} "${itemName}"...`,
-        success: `${resourceName} "${itemName}" deleted successfully.`,
+        loading: fill(text.table?.deleting ?? "กำลังลบ{resource} “{name}”…", itemName),
+        success: fill(text.table?.deleted ?? "ลบ{resource} “{name}” แล้ว", itemName),
         error: (err: Error) => err.message,
       });
     });
@@ -125,7 +129,7 @@ export function DataTableRowActions<TData>({
             {EditDialog && (
               <DropdownMenuItem onClick={() => setIsEditDialogOpen(true)}>
                 <Pen className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-                Edit
+                {text.edit ?? "แก้ไข"}
               </DropdownMenuItem>
             )}
 
@@ -137,7 +141,7 @@ export function DataTableRowActions<TData>({
                 onClick={() => setIsDeleteDialogOpen(true)}
               >
                 <Trash className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-                Delete
+                {text.table?.delete ?? "ลบ"}
               </DropdownMenuItem>
             )}
           </DropdownMenuGroup>
@@ -153,15 +157,16 @@ export function DataTableRowActions<TData>({
         <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
           <AlertDialogContent>
             <AlertDialogHeader>
-              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+              <AlertDialogTitle>{text.table?.deleteTitle ?? "ยืนยันการลบ"}</AlertDialogTitle>
               <AlertDialogDescription>
-                This action cannot be undone. This will permanently delete the{" "}
-                {resourceName.toLowerCase()} &ldquo;{itemName}&rdquo; and remove it from our
-                servers.
+                {fill(
+                  text.table?.deleteDescription ?? "ลบ{resource} “{name}” แล้วกู้คืนไม่ได้",
+                  itemName,
+                )}
               </AlertDialogDescription>
             </AlertDialogHeader>
             <AlertDialogFooter>
-              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogCancel>{text.cancel}</AlertDialogCancel>
               <DeleteButton onClick={handleDelete} isLoading={isPending} />
             </AlertDialogFooter>
           </AlertDialogContent>

package/src/components/data-table/data-table.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import {
   TableBody,
   TableCell,
@@ -80,6 +81,7 @@ export function DataTable<TData, TValue>({
   onReorder,
   renderCustomView,
 }: DataTableProps<TData, TValue>) {
+  const text = useUiText();
   const { table } = useDataTable({
     columns,
     data,
@@ -221,7 +223,7 @@ export function DataTable<TData, TValue>({
         ) : (
           <TableRow>
             <TableCell colSpan={table.getVisibleLeafColumns().length} className="h-24 text-center">
-              {emptyStateComponent || "No results."}
+              {emptyStateComponent || (text.table?.noResults ?? "ไม่พบข้อมูล")}
             </TableCell>
           </TableRow>
         )}

package/src/components/shared/activity-feed.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import { Initials } from "@suphark/ui/components/shared/initials";
+import { ClientDateFormatter } from "@suphark/ui/components/shared/time/client-date-formatter";
+import { cn } from "@suphark/ui/lib/utils";
+import type { ReactNode } from "react";
+
+export type ActivityTone = "default" | "info" | "success" | "warning" | "destructive";
+
+export interface ActivityItem {
+  id: string;
+  /** สิ่งที่เกิดขึ้น เช่น "แก้ไขสิทธิ์ของสมชาย" */
+  title: ReactNode;
+  /** รายละเอียดเพิ่ม (ก่อน → หลัง, เหตุผล, IP) */
+  description?: ReactNode;
+  /** ชื่อผู้ทำ — ไม่ส่ง = เหตุการณ์ของระบบ */
+  actor?: string | null;
+  /** รูปผู้ทำ (ไม่มี = ตัวย่อชื่อ) */
+  actorSrc?: string | null;
+  at: Date | string | number;
+  /** ไอคอนแทน avatar (เหตุการณ์ของระบบ เช่น `<KeyIcon />`) */
+  icon?: ReactNode;
+  tone?: ActivityTone;
+  /** มุมขวาของแถว เช่น `<StatusBadge>` หรือปุ่มดูรายละเอียด */
+  action?: ReactNode;
+}
+
+const DOT_TONE: Record<ActivityTone, string> = {
+  default: "bg-muted text-muted-foreground",
+  info: "bg-info-subtle text-info-subtle-foreground",
+  success: "bg-success-subtle text-success-subtle-foreground",
+  warning: "bg-warning-subtle text-warning-subtle-foreground",
+  destructive: "bg-destructive-subtle text-destructive-subtle-foreground",
+};
+
+/**
+ * เส้นเวลา "ใครทำอะไรเมื่อไหร่" จาก array เดียว — audit log (Pi Auth), ประวัติงาน (Pi Done), timeline ของเอกสาร
+ * เวลาคำนวณฝั่ง client หลัง mount (ไม่ทำ hydration mismatch) และอัปเดตเองทุกนาที
+ * รายการที่มี `icon` ใช้ไอคอนแทน avatar; ไม่มีทั้งคู่ = ตัวย่อชื่อผู้ทำ
+ *
+ *   <ActivityFeed items={[{ id: "1", title: "เปลี่ยนสิทธิ์เป็นผู้ดูแล", actor: "สมชาย ใจดี", at: row.createdAt }]} />
+ */
+export function ActivityFeed({
+  items,
+  relative = true,
+  emptyLabel,
+  className,
+}: {
+  items: ReadonlyArray<ActivityItem>;
+  /** true = "5 นาทีที่แล้ว" (ค่าเริ่มต้น) · false = วันที่/เวลาเต็ม */
+  relative?: boolean;
+  /** ไม่มีรายการ (ค่าเริ่มต้น "ยังไม่มีรายการ") */
+  emptyLabel?: ReactNode;
+  className?: string;
+}) {
+  if (items.length === 0) {
+    return (
+      <p className={cn("py-6 text-center text-muted-foreground text-sm", className)}>
+        {emptyLabel ?? "ยังไม่มีรายการ"}
+      </p>
+    );
+  }
+
+  return (
+    <ol data-slot="activity-feed" className={cn("flex flex-col", className)}>
+      {items.map((item, index) => {
+        const tone = item.tone ?? "default";
+        const last = index === items.length - 1;
+        return (
+          <li key={item.id} className="flex gap-3">
+            {/* เส้นแนวตั้ง + จุด/avatar */}
+            <div className="flex flex-col items-center">
+              {item.icon ? (
+                <span
+                  className={cn(
+                    "flex size-7 shrink-0 items-center justify-center rounded-full [&_svg]:size-3.5",
+                    DOT_TONE[tone],
+                  )}
+                >
+                  {item.icon}
+                </span>
+              ) : (
+                <Initials name={item.actor ?? ""} src={item.actorSrc} className="size-7" />
+              )}
+              {!last && <span className="w-px flex-1 bg-border" aria-hidden="true" />}
+            </div>
+            <div className={cn("flex min-w-0 flex-1 gap-3", last ? "pb-0" : "pb-4")}>
+              <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <p className="text-sm leading-snug">
+                  {item.actor && <span className="font-medium">{item.actor} </span>}
+                  {item.title}
+                </p>
+                {item.description && (
+                  <div className="text-muted-foreground text-xs">{item.description}</div>
+                )}
+                <ClientDateFormatter
+                  date={item.at}
+                  formatType={relative ? "relative" : "standard"}
+                  options={
+                    relative
+                      ? undefined
+                      : { day: "numeric", month: "short", year: "numeric", timeStyle: "short" }
+                  }
+                  className="text-muted-foreground text-xs"
+                />
+              </div>
+              {item.action && <div className="shrink-0">{item.action}</div>}
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/src/components/shared/inline-edit.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/shared/button/button";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
+import { Input } from "@suphark/ui/components/ui/input";
+import { errorMessage, isNavigationError } from "@suphark/ui/lib/action-result";
+import { cn } from "@suphark/ui/lib/utils";
+import { CheckIcon, Loader2Icon, PencilIcon, XIcon } from "lucide-react";
+import { type ReactNode, useRef, useState } from "react";
+import { toast } from "sonner";
+
+export interface InlineEditProps {
+  value: string;
+  /** บันทึกค่าใหม่ — throw หรือคืน `{ ok: false, error }` = ล้มเหลว (คงโหมดแก้ไขไว้ให้ลองใหม่) */
+  onSave: (value: string) => void | Promise<unknown>;
+  /** ป้ายสำหรับ screen reader ของปุ่มแก้ไข/ช่องกรอก เช่น "ชื่อโปรเจกต์" */
+  label: string;
+  placeholder?: string;
+  /** แสดงแทนค่าว่าง (ค่าเริ่มต้น "—") */
+  emptyLabel?: ReactNode;
+  /** ตรวจก่อนบันทึก — คืนข้อความ = ไม่ผ่าน */
+  validate?: (value: string) => string | null | undefined;
+  /**
+   * คุมโหมดแก้ไขจากข้างนอก (เช่นเข้าโหมดแก้ไขด้วย F2 หรือเมนูคลิกขวา "เปลี่ยนชื่อ")
+   * ส่ง `editing` คู่กับ `onEditingChange` = controlled; ไม่ส่ง = component คุมเอง
+   */
+  editing?: boolean;
+  onEditingChange?: (editing: boolean) => void;
+  /** เริ่มต้นอยู่ในโหมดแก้ไขเลย (uncontrolled — เช่นแถวที่เพิ่งสร้าง) */
+  defaultEditing?: boolean;
+  /** กด Esc / ปุ่ม ✕ (ไม่ถูกเรียกเมื่อบันทึกสำเร็จ) */
+  onCancel?: () => void;
+  /** ค่าเดิมกับค่าใหม่เท่ากัน = ปิดโหมดแก้ไขโดยไม่เรียก `onSave` (ค่าเริ่มต้น true) */
+  skipWhenUnchanged?: boolean;
+  disabled?: boolean;
+  /** sm = ใช้ในแถวตาราง */
+  size?: "sm" | "default";
+  className?: string;
+}
+
+/**
+ * แก้ค่าในที่ — คลิกข้อความ (หรือปุ่มดินสอ) → ช่องกรอก → Enter/✓ บันทึก, Esc/✕ ยกเลิก
+ * ใช้กับค่าสั้น ๆ ที่ไม่คุ้มเปิด dialog (ชื่อโปรเจกต์, ชื่อเล่นของคีย์, หมายเหตุหนึ่งบรรทัด)
+ * ล้มเหลว = ขึ้น toast และคงโหมดแก้ไขไว้ให้ลองใหม่ · ค่ายาว/หลายช่องใช้ `FormDialog`
+ *
+ *   <InlineEdit label="ชื่อโปรเจกต์" value={p.name} onSave={(name) => renameProject(p.id, name)} />
+ */
+export function InlineEdit({
+  value,
+  onSave,
+  label,
+  placeholder,
+  emptyLabel = "—",
+  validate,
+  editing: editingProp,
+  onEditingChange,
+  defaultEditing = false,
+  onCancel,
+  skipWhenUnchanged = true,
+  disabled = false,
+  size = "default",
+  className,
+}: InlineEditProps) {
+  const text = useUiText();
+  const [uncontrolledEditing, setUncontrolledEditing] = useState(defaultEditing);
+  const editing = editingProp ?? uncontrolledEditing;
+  const [draft, setDraft] = useState(value);
+  const [pending, setPending] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  // เลือกข้อความทั้งหมดครั้งแรกที่เข้าโหมดแก้ไข — พิมพ์ทับได้ทันที (โฟกัสรอบหลังไม่เลือกซ้ำ)
+  const selectedOnOpen = useRef(false);
+
+  // เข้าโหมดแก้ไขจากข้างนอก (F2/เมนู) ก็ต้องเริ่มจากค่าปัจจุบันเหมือนกดปุ่มดินสอ
+  const wasEditing = useRef(editing);
+  if (editing && !wasEditing.current) {
+    setDraft(value);
+    selectedOnOpen.current = false;
+  }
+  wasEditing.current = editing;
+
+  function setEditing(next: boolean) {
+    if (editingProp === undefined) setUncontrolledEditing(next);
+    onEditingChange?.(next);
+  }
+
+  function start() {
+    setDraft(value);
+    selectedOnOpen.current = false;
+    setEditing(true);
+  }
+
+  /** ยกเลิก (Esc / ปุ่ม ✕) — ต่างจากบันทึกสำเร็จตรงที่บอกแอปด้วย */
+  function cancel() {
+    setEditing(false);
+    onCancel?.();
+  }
+
+  async function commit() {
+    const next = draft.trim();
+    if (skipWhenUnchanged && next === value.trim()) {
+      setEditing(false);
+      return;
+    }
+    const invalid = validate?.(next);
+    if (invalid) {
+      toast.error(invalid);
+      inputRef.current?.focus();
+      return;
+    }
+    setPending(true);
+    try {
+      const result = await onSave(next);
+      // server action ที่คืน { ok: false, error } ถือว่าล้มเหลวเหมือน throw
+      if (result && typeof result === "object" && "ok" in result && result.ok === false) {
+        const message = "error" in result ? String(result.error) : undefined;
+        toast.error(message || (text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+        return;
+      }
+      setEditing(false);
+    } catch (err) {
+      // action ที่ redirect() = สำเร็จ (Next นำทางให้แล้ว)
+      if (isNavigationError(err)) {
+        setEditing(false);
+        return;
+      }
+      toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+    } finally {
+      setPending(false);
+    }
+  }
+
+  const compact = size === "sm";
+
+  if (!editing) {
+    return (
+      <span
+        data-slot="inline-edit"
+        className={cn("group/inline inline-flex min-w-0 items-center gap-1", className)}
+      >
+        <span
+          className={cn("truncate", compact ? "text-sm" : "", !value && "text-muted-foreground")}
+        >
+          {value || emptyLabel}
+        </span>
+        <Button
+          variant="ghost"
+          size={compact ? "icon-xs" : "icon-sm"}
+          aria-label={`${text.edit ?? "แก้ไข"}: ${label}`}
+          disabled={disabled}
+          onClick={start}
+          className="opacity-0 transition-opacity focus-visible:opacity-100 group-hover/inline:opacity-100"
+        >
+          <PencilIcon />
+        </Button>
+      </span>
+    );
+  }
+
+  return (
+    <span
+      data-slot="inline-edit"
+      className={cn("inline-flex min-w-0 items-center gap-1", className)}
+    >
+      <Input
+        ref={inputRef}
+        // biome-ignore lint/a11y/noAutofocus: เพิ่งกดปุ่มแก้ไข — โฟกัสต่อเนื่องคือสิ่งที่ผู้ใช้คาดหวัง
+        autoFocus
+        aria-label={label}
+        value={draft}
+        placeholder={placeholder}
+        disabled={pending}
+        className={cn("min-w-0", compact && "h-7")}
+        onFocus={(e) => {
+          if (selectedOnOpen.current) return;
+          selectedOnOpen.current = true;
+          e.currentTarget.select();
+        }}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            void commit();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            cancel();
+          }
+        }}
+      />
+      <Button
+        variant="ghost"
+        size={compact ? "icon-xs" : "icon-sm"}
+        aria-label={text.save}
+        disabled={pending}
+        onClick={() => void commit()}
+      >
+        {pending ? <Loader2Icon className="animate-spin" /> : <CheckIcon />}
+      </Button>
+      <Button
+        variant="ghost"
+        size={compact ? "icon-xs" : "icon-sm"}
+        aria-label={text.cancel}
+        disabled={pending}
+        onClick={cancel}
+      >
+        <XIcon />
+      </Button>
+    </span>
+  );
+}