@suphark/ui 0.45.2 → 0.53.0

package/CHANGELOG.md

@@ -2,7 +2,85 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
-## [0.45.2] — 2026-10-08
+## [0.53.0] — 2026-10-23
+
+### Changed
+- showcase: `/components/sortable-list` ปรับให้ตรง mockup — หัวตาราง "ตัวแปรสภาพแวดล้อม · N คีย์" + ปุ่ม ? ด้านบน, ตัวเลขจำนวนคีย์ในหัวกลุ่ม, เส้นนำแนวตั้งของคีย์ในกลุ่ม, สีตอนชี้แถว, เส้นแทรกสีหลักที่แถวที่กำลังลาก, แคปซูลเลือกหมู่อยู่ใต้ตาราง
+- `DatePicker` ปรับให้ตรง mockup "Type first" (0.49.0 วาดไม่ตรง): ไอคอนปฏิทินอยู่ซ้ายของช่อง · ป้าย `Enter` อยู่ในช่องขวา (เดิมอยู่ในกล่องผล) · กล่องผลที่อ่านออก (เขียว) แยกเป็นกล่องของตัวเองเหนือการ์ดปฏิทิน · หัวปฏิทินเป็นปุ่มเดียว "ตุลาคม 2569 ▾" กดแล้วเป็นตารางเลือกเดือน/ปี (แทนเมนูเดือน + เมนูปีสองอัน) · แผ่น "ทั้งหมด" มีหัว "พิมพ์ลัดทั้งหมด · กดเพื่อเติมในช่อง" · `UiText.datePicker.allShortcuts`/`tapToFill`
+
+## [0.52.0] — 2026-10-23
+
+### Changed
+- `variant="quiet"` ของ `RecordCard`/`NotificationCenter` ปรับให้ตรงแบบ mockup จริง (0.51.0 วาดไม่ตรง): ไอคอนอยู่ในกรอบ 36px พื้น muted สีตาม accent · `StatusBadge` ที่อยู่ในแถว quiet กลายเป็น "จุดสี + ข้อความสี" ไม่มีกรอบ/พื้นอัตโนมัติ (CSS `in-data-[variant=quiet]`, นอก quiet เหมือนเดิม) · ปุ่มรองเป็น outline (เดิม ghost) ปุ่มหลักใช้แถวเดียว
+
+### Added
+- `RecordCard`/`NotificationEntry` `highlight` (quiet: พื้น accent จาง ๆ เน้นแถวที่ต้องจัดการก่อน) และ `progress` (quiet: แถบความคืบหน้า 0–100 ใต้ยอด)
+- showcase: notification-center โหมด quiet ตามแบบ — ยอดไม่มีสตางค์, แถวแรกเน้น + ปุ่มหลักตัวเดียว, แถบ 35/60 รอบ, เมนู … ทุกแถว
+
+## [0.51.0] — 2026-10-23
+
+### Added
+- `useSortableRow().toggleSelected()` — เลือก/ไม่เลือกแถวจากช่องติ๊กในแถว (ช่องติ๊กโผล่เมื่อชี้ เหมือนที่จับ)
+- `SelectionBar variant="pill"` — แคปซูลสีหลักลอยกลางล่างจอ เด่นกว่า `floating` (ใช้กับแถบเลือกหมู่ของ Sortable)
+- `RecordCard variant="quiet"` (opt-in, ค่าเริ่มต้น `card` เหมือนเดิม) — แถวเรียบแบบสมุดบัญชี "Quiet ledger": ไม่มีกรอบ/พื้นสี สีของ `accent` เหลือแค่ไอคอน, ชื่อ + (สถานะ · meta) ซ้าย, ยอดเงินขวา, ปุ่มท้ายแถว — เห็นได้มากกว่าเท่าตัวในที่เท่ากัน · props เดิมทั้งหมดใช้ต่อได้ ไม่ใช่ major
+- `NotificationCenter variant="quiet"` + `NotificationEntry.section` — ชิปนับเป็นแท็บขีดเส้นใต้ (ตัวเลข danger เป็นสีแดง) รายการเป็นแถว quiet ในกรอบเดียว มีหัวกลุ่มคั่นตาม `section`
+- showcase: sortable-list มีช่องติ๊กโผล่เมื่อชี้ + แคปซูลเลือกหมู่ + กรอบบอกตำแหน่งเดิมตอนลาก; record-card / notification-center มีตัวอย่าง quiet (notification-center สลับ card/quiet ได้)
+
+## [0.50.0] — 2026-10-23
+
+### Added
+- `@suphark/ui/sortable`: `DragHandle reveal` (opt-in, ค่าเริ่มต้นเหมือนเดิม) — "สงบจนกว่าจะแตะ": ซ่อนที่จับ โผล่เมื่อชี้แถว / โฟกัสในแถว / แถวถูกเลือก (จอสัมผัสเห็นตลอด, Tab ถึงที่จับได้เสมอ) · แอปใส่ `group/row` ที่แถว
+- showcase: `/components/sortable-list` ใช้ `reveal` และย้ายข้อความสอนยาวไว้หลังปุ่ม ? (แผ่นลัดแป้นพิมพ์)
+
+## [0.49.0] — 2026-10-23
+
+### Changed
+
+- **`DatePicker` redesign "Type first"** (ทั้งวันเดียวและ `mode="range"`; API/props/ค่าที่ส่งในฟอร์ม `name`/`defaultValue`/`required` เหมือนเดิมทุกตัว — แอปที่ใช้อยู่ไม่ต้องแก้):
+  - **ช่องคือ input ที่พิมพ์ได้โดยตรง** (เดิมเป็นปุ่มที่ต้องเปิดป๊อปอัปก่อนถึงมีช่องพิมพ์ซ้อนอยู่ข้างใน) — คลิกช่อง = เลือกทั้งข้อความ พิมพ์ทับได้เลย · `<label>` ที่ครอบ/ชี้ (`LabeledField`) โฟกัสที่ช่องพิมพ์โดยตรง
+  - **เห็นผลที่อ่านออกใต้ช่องทันที**: "จ. 26 ต.ค. 2569 · ในอีก 3 วัน" / ช่วง "16–23 ต.ค. 2569 · 8 วัน" (กดผลนั้นหรือ Enter เพื่อยืนยัน) — แก้ปัญหา "10/02 อ่านได้สองแบบ"; อ่านไม่ออก = "อ่านไม่ออก — ลองพิมพ์ t+3" ไม่ทิ้งค่าที่พิมพ์ทิ้งเงียบ ๆ; พิมพ์วันเดียวในช่องช่วง = ช่วงหนึ่งวัน
+  - ปฏิทินเลื่อนตามข้อความที่พิมพ์และไฮไลต์วันที่อ่านได้ทันที · แถวพิมพ์ลัดบรรทัดเดียวใต้ปฏิทิน (กดเติมลงช่อง) + "ทั้งหมด ›" เปิดแผ่นตัวอย่างวิธีพิมพ์ในกล่องเดียวกัน — **เลิกปุ่ม (i) / ตารางวิธีพิมพ์ที่กินที่ / ปุ่ม "ตกลง"**
+  - ปุ่ม ✕ ล้างค่าและปุ่มเปิดปฏิทินเป็น `<button>` จริง (เดิม ✕ เป็น `<span role="button">`) · วันที่สัมพัทธ์ "(พรุ่งนี้)" ยังแสดงท้ายช่องตาม `showRelative`
+  - **ปฏิทินใช้ภาษา/ปีเดียวกับช่อง** (เดิมไม่ส่ง `locale` แล้วขึ้น "Oct 2026" อังกฤษ ทั้งที่ช่องแสดง พ.ศ.) · หัวคอลัมน์วันไทย 2 ตัว (อา จ อ พ พฤ ศ ส) แทนตัวเดียวที่ "อ"/"พ" กำกวม
+  - คลิกวันที่ที่เลือกอยู่แล้วในปฏิทิน = ยืนยันวันนั้น (เดิมล้างค่าแบบ toggle — ล้างใช้ปุ่ม ✕)
+  - `showSmartInput={false}` = ช่องอ่านอย่างเดียว กดแล้วเปิดปฏิทินอย่างเดียว (แบบเดิม ไม่มีแถบพิมพ์ลัด) · `showPresets` ยัง deprecated ไม่มีผล
+  - ป๊อปอัปไม่มี animation ตอนปิด (Base UI ถอดตัวดักโฟกัส `<span tabindex=0>` ที่วางต่อท้ายช่องก็ต่อเมื่อ animation จบ ระหว่างนั้น Tab ตกไปที่มัน)
+- `UiText.datePicker` เพิ่ม `cannotRead` (`{example}`), `shortcutsLabel`, `showAll`, `backToCalendar`, `openCalendar`, `dayCount` (`{count}`) — ไทย/อังกฤษในตัว
+
+### Fixed
+
+- **คีย์บอร์ด: ลูกศรเลือกวันในปฏิทินไม่ย้ายโฟกัสจริง** — `CalendarDayButton` ใน `components/ui/calendar.tsx` (ไฟล์ shadcn) มี effect สั่ง `ref.current?.focus()` แต่ **ไม่เคยผูก `ref` กับปุ่ม** ลูกศรจึงเลื่อนแค่สถานะภายในของ react-day-picker โฟกัสจริงค้างที่เดิม (กระทบ `Calendar` ทุกที่ รวม DatePicker แบบเดิม) · `DatePicker` แก้ที่ฝั่งตัวเองด้วย `components={{ DayButton }}` ที่ผูก ref ให้ · **`Calendar` ดิบที่แอปใช้เองยังมีบั๊กนี้** (ห้ามแก้ไฟล์ shadcn — จดใน todo)
+- ป๊อปอัป DatePicker สูง ~400px ไม่พอทั้งบนและล่างแล้ว Base UI ย้ายไปวางข้างช่อง (ทับเนื้อหา) → พลิกได้เฉพาะบน↔ล่าง
+- Tab ออกจากช่องที่เปิดป๊อปอัปอยู่ แล้วโฟกัสหลุดไป `body` แทนที่จะไปช่องถัดไป (ตัวดักโฟกัสของ Base UI)
+
+### Security
+
+- อัป `next` (devDependency ของแพ็กเกจ + showcase ui.suphark.com) เป็น `^16.4.2` — ปิดช่องโหว่ใน `next >=16.0.0 <=16.4.0`: **critical** RCE ไม่ต้องล็อกอินใน Image Optimization API เมื่อใช้ไฟล์ SVG (GHSA-2464-fhr4-w9xw) · **critical** RCE ไม่ต้องล็อกอินใน `use cache` ที่คืน typed array (GHSA-673q-mjm6-r5xr) · high DoS ใน App Router ที่ใช้ Server Actions · override `source-map-js >=1.2.2` (high DoS ที่ติดมากับ postcss) · `pnpm audit --prod --audit-level=high` สะอาด · **peerDependency `next >=15` ไม่เปลี่ยน** — แอปที่ใช้ Next 16 อัปเองเป็น `^16.4.2` (แพ็กเกจส่ง source ไม่ได้บังคับเวอร์ชัน next)
+
+### Added
+
+- `HeaderBreadcrumbs` (และ `AppShell` `header.breadcrumbs: { upButton }`): **`upButton`** + `upLabel` — ปุ่ม X ท้าย breadcrumb ถอยขึ้นหนึ่งระดับแบบ Vercel (ไปที่ segment ก่อนหน้า หรือ `homeHref` ถ้ามี segment เดียว · ไม่แสดงหน้าแรก) · ปิดไว้เป็นค่าเริ่มต้น แอปเดิมไม่เปลี่ยน (ขอจาก Pi Config ซึ่งทำเองใน `breadcrumbs.tsx` แล้ว) · showcase `/shell` เปิดใช้
+
+## [0.48.0] — 2026-10-10
+
+> ประกาศพร้อม publish แล้วแต่ยังไม่ขึ้น npm — รวมอยู่ใน 0.49.0
+
+### Added
+
+- showcase: หน้า `/components/web-push-row` (demo WebPushRow)
+- WebPushRow (@suphark/ui/pwa): แถวตั้งค่าเปิด/ปิดการแจ้งเตือน Web Push บนเบราว์เซอร์ พร้อมจัดการ Service Worker registration, PushManager subscription, permission check, และ Feedback toast อัตโนมัติ
+
+## [0.47.0] — 2026-10-08
+
+### Changed
+
+- **`@suphark/ui/sortable` รองรับโครงเดียว: หัวกลุ่มกับแถวรายการเป็นพี่น้องกัน** (`<tr>` ใน `<tbody>` เดียวกัน หรือการ์ดในลิสต์เดียวกัน) — เจ้าของเลือกให้เหลือรูปแบบเดียวเพื่อดูแลง่าย หลัง Pi Config ย้ายจากโครง "`<tbody>` ต่อกลุ่ม" มาแบบนี้แล้ว (71735f0) · **ห้ามให้ node ของกลุ่มครอบแถวรายการไว้** (เช่นแปะ `ref` ของกลุ่มที่ `<tbody>` ที่ห่อแถวคีย์) ไม่งั้นแถวลูกจะเลื่อนสองชั้นและกรอบของก้อนถูกนับซ้ำ · ถอดโค้ดที่เคยรองรับโครงนั้นออก (`insideGroup` ใน context ภายใน, การกันนับซ้ำใน `blockRect`) — ไม่มี props ใดเปลี่ยน แอปที่ทำตามตัวอย่างใน `/components/sortable-list` ไม่ต้องแก้อะไร
+
+
+### Added
+
+- type `DistributiveOmit<T, K>` / `DistributivePick<T, K>` (ขอจาก Pi Auth): `Omit` ปกติยุบ union ของ props ที่มี discriminant — `Omit<DatePickerProps, "locale">` ทำให้ `name` กลายเป็น `string | [string, string]` แยกตาม `mode` ไม่ได้อีก ตัวห่อของแอปจึงพัง · ใช้ `DistributiveOmit<DatePickerProps, "locale">` แทนได้เลย ไม่ต้อง cast (มีเทสต์ type ที่พิสูจน์แล้วว่าแดงเมื่อถอดตัวแก้)
+
 
 ### Fixed
 

package/README.md

@@ -236,6 +236,8 @@ const [order, setOrder] = useState(() =>
 - การ์ดลอยตามเมาส์: `renderOverlay={(drag) => drag.kind === "item" ? <ItemCard id={drag.id} /> : <GroupCard id={drag.id} />}` (วาดใน portal จึงเป็น `div` ได้ ไม่ต้องเป็น `<tr>`) — ไม่ใส่ = แถวขยับเองแบบเดิม · โฟลเดอร์ที่ย่ออยู่: `useSortableDropZone(id, { onDwell: collapsed ? open : undefined })` ลากค้าง 600ms แล้วเปิดให้ · วางบนหัวกลุ่ม = ขึ้นบนสุดของกลุ่ม, วางบนโซนของ `UNGROUPED` = ต่อท้าย
 - เลือกหลายรายการแล้วลากพร้อมกัน: `SortableProvider multiSelect` แล้วกระจาย `row.selectProps` ลงแถว (ทำสีด้วย `data-[selected]:bg-primary/10`) — ⌘/Ctrl+คลิก, Shift+คลิก, ที่จับกด `x` / ⌘/Ctrl+A, Esc ล้าง · แถบนับใช้ `SelectionBar` + `useSortableState().selected/clearSelection` · `renderOverlay` ได้ `drag.ids` ไว้ทำการ์ดซ้อน
 - จัดชั้นบนสุดอิสระ (กลุ่มกับรายการไม่มีกลุ่มสลับกันได้): `SortableProvider freeLayout` + เรนเดอร์ตาม `rootEntries(order)` (ครอบทั้งหมดด้วย `<SortableGroup itemIds={order.items[UNGROUPED]}>` แล้วแต่ละกลุ่มมี `SortableGroup` ของตัวเองข้างใน) + บันทึก `payload.root` และส่งกลับ `sortableOrderOf(..., { root })` ตอนโหลด · หัวกลุ่มครึ่งบน = ก่อนกลุ่ม, ครึ่งล่าง = เข้ากลุ่ม
+- `DatePicker`: ช่องพิมพ์ได้โดยตรง — "15/3", "15/3/69", "t+3", "t+1m", ช่วง "1/7-5/7" / "t-7..t" (`mode="range"`) เห็นผลที่อ่านออกใต้ช่อง กด Enter ยืนยัน · ↓ เปิดปฏิทิน/เข้าปฏิทิน (ลูกศร+Enter เลือกวัน) · Esc ยกเลิก · ในฟอร์ม `name`/`defaultValue`/`required` ส่ง YYYY-MM-DD · ห่อใน `LabeledField` ได้ (label โฟกัสที่ช่องพิมพ์)
+- ห่อ component ที่ props เป็น union (เช่น `DatePicker` ที่มี `mode="range"`): ใช้ `DistributiveOmit`/`DistributivePick` แทน `Omit`/`Pick` ไม่งั้น union ถูกยุบจนแยกตาม `mode` ไม่ได้
 - `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`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.45.2",
+  "version": "0.53.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 เอง",
@@ -120,7 +120,7 @@
     "@vitejs/plugin-react": "^6.1.0",
     "jsdom": "^29.1.1",
     "lucide-react": "^1.45.0",
-    "next": "^16.3.8",
+    "next": "^16.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-hook-form": "^7.86.0",

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

@@ -8,6 +8,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@suphark/ui/components/ui/breadcrumb";
+import { XIcon } from "lucide-react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Fragment, type ReactNode } from "react";
@@ -28,6 +29,13 @@ export interface HeaderBreadcrumbsProps {
   skip?: string[];
   /** ซ่อน segment ที่ดูเหมือน id (ตัวเลข/uuid/cuid) */
   hideIds?: boolean;
+  /**
+   * ปุ่ม X ท้าย breadcrumb ถอยขึ้นหนึ่งระดับ (แบบ Vercel) — ไปที่ segment ก่อนหน้า หรือ `homeHref` ถ้ามี segment เดียว
+   * ไม่แสดงในหน้าแรก (ไม่มี segment) · ปิดไว้เป็นค่าเริ่มต้น จึงไม่เปลี่ยนแอปเดิม
+   */
+  upButton?: boolean;
+  /** ข้อความของปุ่ม X (aria-label + tooltip) — ค่าเริ่มต้น "Back" */
+  upLabel?: string;
 }
 
 // ตัวเลขล้วน / uuid / cuid / ตัวอักษร+ตัวเลขปน ≥16 ตัว (ต้องมีตัวเลขอย่างน้อย 1 — คำธรรมดายาว ๆ ไม่ใช่ id)
@@ -47,6 +55,8 @@ export function HeaderBreadcrumbs({
   homeLabel = "Home",
   skip = [],
   hideIds = false,
+  upButton = false,
+  upLabel = "Back",
 }: HeaderBreadcrumbsProps) {
   const pathname = usePathname();
   const all = pathname.split("/").filter(Boolean);
@@ -55,6 +65,8 @@ export function HeaderBreadcrumbs({
     .map((segment, index) => ({ segment, href: `/${all.slice(0, index + 1).join("/")}` }))
     .filter(({ segment }) => !skip.includes(segment) && !(hideIds && ID_LIKE.test(segment)));
 
+  const upHref = shown.length >= 2 ? (shown[shown.length - 2]?.href ?? homeHref) : homeHref;
+
   return (
     <Breadcrumb>
       <BreadcrumbList>
@@ -80,6 +92,18 @@ export function HeaderBreadcrumbs({
             </Fragment>
           );
         })}
+        {upButton && shown.length > 0 && (
+          <BreadcrumbItem>
+            <Link
+              href={upHref}
+              aria-label={upLabel}
+              title={upLabel}
+              className="inline-flex size-6 items-center justify-center rounded-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+            >
+              <XIcon className="size-3.5" aria-hidden="true" />
+            </Link>
+          </BreadcrumbItem>
+        )}
       </BreadcrumbList>
     </Breadcrumb>
   );

package/src/components/pwa/web-push-row.tsx

@@ -0,0 +1,126 @@
+"use client";
+
+import { SwitchRow } from "@suphark/ui/components/shared/settings-row";
+import { type ReactNode, useEffect, useState, useTransition } from "react";
+import { toast } from "sonner";
+
+export interface WebPushRowProps {
+  /** ฟังก์ชันดึง VAPID Public Key จาก server action */
+  getPublicKey: () => Promise<string>;
+  /** Callback เมื่อผู้ใช้เปิดรับการแจ้งเตือน (ส่ง subscription ให้ server บันทึก) */
+  onSubscribe: (subscription: PushSubscriptionJSON) => Promise<unknown>;
+  /** Callback เมื่อผู้ใช้ปิดการแจ้งเตือน (ส่ง endpoint ให้ server ลบ) */
+  onUnsubscribe?: (endpoint: string) => Promise<unknown>;
+  /** Path ของ Service Worker (default: "/sw.js") */
+  swPath?: string;
+  /** หัวข้อแถว (default: "การแจ้งเตือนบนเบราว์เซอร์") */
+  title?: ReactNode;
+  /** คำอธิบาย (default: "รับแจ้งเตือนเตือนความจำและอัปเดตงานทันทีผ่าน Web Push") */
+  description?: ReactNode;
+  /** ข้อความเมื่อเปิดสำเร็จ (default: "เปิดรับการแจ้งเตือนบนเบราว์เซอร์แล้ว") */
+  successSubscribeMessage?: string;
+  /** ข้อความเมื่อปิดสำเร็จ (default: "ปิดการแจ้งเตือนแล้ว") */
+  successUnsubscribeMessage?: string;
+  /** ปิดการทำงาน (disabled) เพิ่มเติม */
+  disabled?: boolean;
+  className?: string;
+}
+
+/**
+ * แถวตั้งค่าเปิด/ปิดการแจ้งเตือน Web Push บนเบราว์เซอร์
+ * จัดการ Service Worker registration, PushManager subscription, และ Feedback toast อัตโนมัติ
+ *
+ *   <WebPushRow
+ *     getPublicKey={getVapidKey}
+ *     onSubscribe={registerPush}
+ *     onUnsubscribe={unregisterPush}
+ *   />
+ */
+export function WebPushRow({
+  getPublicKey,
+  onSubscribe,
+  onUnsubscribe,
+  swPath = "/sw.js",
+  title = "การแจ้งเตือนบนเบราว์เซอร์",
+  description = "รับแจ้งเตือนเตือนความจำและอัปเดตงานทันทีผ่าน Web Push",
+  successSubscribeMessage = "เปิดรับการแจ้งเตือนบนเบราว์เซอร์แล้ว",
+  successUnsubscribeMessage = "ปิดการแจ้งเตือนแล้ว",
+  disabled: customDisabled,
+  className,
+}: WebPushRowProps) {
+  const [enabled, setEnabled] = useState(false);
+  const [supported, setSupported] = useState(true);
+  const [pending, startTransition] = useTransition();
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!("serviceWorker" in navigator) || !("PushManager" in window)) {
+      setSupported(false);
+      return;
+    }
+    navigator.serviceWorker.ready
+      .then((reg) => reg.pushManager.getSubscription())
+      .then((sub) => {
+        setEnabled(Boolean(sub));
+      })
+      .catch(() => {
+        setEnabled(false);
+      });
+  }, []);
+
+  const handleToggle = (checked: boolean) => {
+    if (!supported) {
+      toast.error("เบราว์เซอร์นี้ไม่รองรับ Web Push");
+      return;
+    }
+
+    startTransition(async () => {
+      try {
+        const reg = await navigator.serviceWorker.register(swPath);
+        await navigator.serviceWorker.ready;
+
+        if (checked) {
+          if (Notification.permission === "denied") {
+            toast.error("คุณบล็อกการแจ้งเตือนไว้ในเบราว์เซอร์ โปรดปลดบล็อกในการตั้งค่าไซต์");
+            return;
+          }
+
+          const key = await getPublicKey();
+          const sub = await reg.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: key,
+          });
+
+          await onSubscribe(sub.toJSON());
+          setEnabled(true);
+          toast.success(successSubscribeMessage);
+        } else {
+          const sub = await reg.pushManager.getSubscription();
+          if (sub) {
+            const endpoint = sub.endpoint;
+            await sub.unsubscribe();
+            if (onUnsubscribe) {
+              await onUnsubscribe(endpoint);
+            }
+          }
+          setEnabled(false);
+          toast.success(successUnsubscribeMessage);
+        }
+      } catch (err) {
+        console.error("WebPushRow error:", err);
+        toast.error("ตั้งค่าไม่สำเร็จ (ตรวจดูการอนุญาตแจ้งเตือนในเบราว์เซอร์)");
+      }
+    });
+  };
+
+  return (
+    <SwitchRow
+      title={title}
+      description={supported ? description : "เบราว์เซอร์นี้ไม่รองรับการแจ้งเตือน Web Push"}
+      checked={enabled}
+      disabled={!supported || pending || customDisabled}
+      onCheckedChange={handleToggle}
+      className={className}
+    />
+  );
+}