@suphark/ui 0.4.3 → 0.5.1

package/src/components/pwa/pwa-install-card.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { Button } from "@suphark/ui/components/ui/button";
+import { cn } from "@suphark/ui/lib/utils";
+import { Check, Download, MonitorSmartphone, Share, Smartphone } from "lucide-react";
+import { useEffect, useState } from "react";
+import {
+  type BeforeInstallPromptEvent,
+  getInstallPrompt,
+  setInstallPrompt,
+  subscribeToInstallPrompt,
+} from "./install-prompt-store";
+
+export interface PwaInstallCardText {
+  /** หัวการ์ด — `{app}` แทนชื่อแอป */
+  title: string;
+  installed: string;
+  canInstall: string;
+  iosHint: string;
+  iosSteps: string;
+  browserMenu: string;
+  installButton: string;
+  installedButton: string;
+  installing: string;
+  dismissed: string;
+  installedNow: string;
+}
+
+export const PWA_INSTALL_CARD_TEXT_TH: PwaInstallCardText = {
+  title: "ติดตั้ง {app}",
+  installed: "{app} เปิดเป็นแอปที่ติดตั้งแล้ว",
+  canInstall: "ติดตั้ง {app} เพื่อเปิดเป็นหน้าต่างแอปและเริ่มเร็วขึ้น",
+  iosHint: "เปิดเมนูแชร์ แล้วเลือก เพิ่มไปยังหน้าจอโฮม",
+  iosSteps: "แตะ แชร์ แล้วเลือก เพิ่มไปยังหน้าจอโฮม",
+  browserMenu: "ติดตั้ง {app} จากเมนูของเบราว์เซอร์เมื่อมีตัวเลือกติดตั้ง",
+  installButton: "ติดตั้งแอป",
+  installedButton: "ติดตั้งแล้ว",
+  installing: "กำลังติดตั้ง {app}",
+  dismissed: "ยกเลิกการติดตั้ง — ติดตั้งภายหลังได้จากเมนูของเบราว์เซอร์",
+  installedNow: "ติดตั้ง {app} บนอุปกรณ์นี้แล้ว",
+};
+
+export const PWA_INSTALL_CARD_TEXT_EN: PwaInstallCardText = {
+  title: "Install {app}",
+  installed: "{app} is already running as an installed app.",
+  canInstall: "Install {app} for a focused app window and faster launch.",
+  iosHint: "Open Share, then choose Add to Home Screen.",
+  iosSteps: "Tap Share, then Add to Home Screen.",
+  browserMenu: "Use your browser menu to install {app} when the install option appears.",
+  installButton: "Install app",
+  installedButton: "Installed",
+  installing: "{app} is installing.",
+  dismissed: "Install dismissed. You can install later from the browser menu.",
+  installedNow: "{app} is installed on this device.",
+};
+
+function isStandaloneDisplay() {
+  if (typeof window === "undefined") return false;
+  return (
+    window.matchMedia("(display-mode: standalone)").matches ||
+    ("standalone" in window.navigator &&
+      (window.navigator as Navigator & { standalone?: boolean }).standalone === true)
+  );
+}
+
+function isIosDevice() {
+  if (typeof window === "undefined") return false;
+  return /iphone|ipad|ipod/i.test(window.navigator.userAgent);
+}
+
+/**
+ * การ์ดชวนติดตั้ง PWA — ใช้ `beforeinstallprompt` ที่ `PwaServiceWorkerRegistration` เก็บไว้;
+ * บน iOS (ไม่มี prompt) แสดงวิธี Add to Home Screen; ติดตั้งแล้วแสดงสถานะ
+ *
+ *   <PwaInstallCard appName="Pi Done" text={PWA_INSTALL_CARD_TEXT_EN} />
+ */
+export function PwaInstallCard({
+  appName,
+  text = PWA_INSTALL_CARD_TEXT_TH,
+  compact = false,
+  className,
+}: {
+  appName: string;
+  text?: PwaInstallCardText;
+  compact?: boolean;
+  className?: string;
+}) {
+  const t = (key: keyof PwaInstallCardText) => text[key].replaceAll("{app}", appName);
+  const [installPrompt, updateInstallPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [isInstalled, setIsInstalled] = useState(false);
+  const [isIos, setIsIos] = useState(false);
+  const [status, setStatus] = useState<"" | "installing" | "dismissed" | "installedNow">("");
+
+  useEffect(() => {
+    setIsInstalled(isStandaloneDisplay());
+    setIsIos(isIosDevice());
+    updateInstallPrompt(getInstallPrompt());
+
+    const unsubscribe = subscribeToInstallPrompt(updateInstallPrompt);
+    const handleAppInstalled = () => {
+      setIsInstalled(true);
+      setInstallPrompt(null);
+      setStatus("installedNow");
+    };
+    window.addEventListener("appinstalled", handleAppInstalled);
+    return () => {
+      unsubscribe();
+      window.removeEventListener("appinstalled", handleAppInstalled);
+    };
+  }, []);
+
+  const canPromptInstall = Boolean(installPrompt) && !isInstalled;
+  const hint = isInstalled
+    ? t("installed")
+    : canPromptInstall
+      ? t("canInstall")
+      : isIos
+        ? t("iosHint")
+        : t("browserMenu");
+
+  const handleInstall = async () => {
+    if (!installPrompt) return;
+    await installPrompt.prompt();
+    const choice = await installPrompt.userChoice;
+    setInstallPrompt(null);
+    setStatus(choice.outcome === "accepted" ? "installing" : "dismissed");
+  };
+
+  const Icon = isInstalled ? Check : isIos ? Smartphone : MonitorSmartphone;
+
+  return (
+    <div className={cn("rounded-lg border bg-muted/20", compact ? "p-3" : "p-4", className)}>
+      <div className="flex items-start gap-3">
+        <div className="flex size-9 shrink-0 items-center justify-center rounded-md border bg-background text-foreground shadow-xs">
+          <Icon className="size-4" aria-hidden="true" />
+        </div>
+        <div className="flex min-w-0 flex-1 flex-col gap-3">
+          <div>
+            <h4 className="text-sm font-semibold">{t("title")}</h4>
+            <p className="mt-0.5 text-xs text-muted-foreground">{hint}</p>
+          </div>
+
+          {isIos && !isInstalled && (
+            <div className="flex items-start gap-2 rounded-md border bg-background px-3 py-2 text-xs text-muted-foreground">
+              <Share className="mt-0.5 size-3.5 shrink-0" aria-hidden="true" />
+              <span>{t("iosSteps")}</span>
+            </div>
+          )}
+
+          <div className="flex flex-wrap items-center gap-2">
+            <Button type="button" size="sm" disabled={!canPromptInstall} onClick={handleInstall}>
+              <Download data-icon="inline-start" />
+              {isInstalled ? t("installedButton") : t("installButton")}
+            </Button>
+            {status && (
+              <span className="text-xs text-muted-foreground" aria-live="polite">
+                {t(status)}
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/pwa/pwa-service-worker-registration.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect } from "react";
+import { type BeforeInstallPromptEvent, setInstallPrompt } from "./install-prompt-store";
+import { watchServiceWorkerUpdates } from "./service-worker-updates";
+
+/**
+ * ลงทะเบียน service worker ของแอป + ติดตามอัปเดต (watchServiceWorkerUpdates) + เก็บ `beforeinstallprompt`
+ * ให้ `PwaInstallCard` — วางครั้งเดียวใน layout ที่มี "use client" ได้ (render null)
+ *
+ *   <PwaServiceWorkerRegistration url="/sw.js" />
+ *
+ * script ฝั่ง worker ควร: เปลี่ยน byte ทุก deployment (ฝัง deployment id/commit), `self.skipWaiting()` ใน install
+ * โดยไม่ขึ้นกับผล precache, `self.clients.claim()` ใน activate, และเสิร์ฟด้วย `Cache-Control: no-cache`
+ */
+export function PwaServiceWorkerRegistration({
+  url = "/sw.js",
+  scope = "/",
+}: {
+  url?: string;
+  scope?: string;
+}) {
+  useEffect(() => {
+    const handleBeforeInstallPrompt = (event: Event) => {
+      event.preventDefault();
+      setInstallPrompt(event as BeforeInstallPromptEvent);
+    };
+    const handleAppInstalled = () => setInstallPrompt(null);
+    window.addEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+    window.addEventListener("appinstalled", handleAppInstalled);
+
+    let stopWatching: (() => void) | null = null;
+    let isUnmounted = false;
+    const register = async () => {
+      if (!("serviceWorker" in navigator)) return;
+      try {
+        const registration = await navigator.serviceWorker.register(url, {
+          scope,
+          updateViaCache: "none",
+        });
+        if (isUnmounted) return;
+        stopWatching = watchServiceWorkerUpdates(navigator.serviceWorker, registration);
+      } catch (error) {
+        console.error("Service worker registration failed:", error);
+      }
+    };
+    if (document.readyState === "complete") {
+      void register();
+    } else {
+      window.addEventListener("load", register, { once: true });
+    }
+
+    return () => {
+      isUnmounted = true;
+      stopWatching?.();
+      window.removeEventListener("beforeinstallprompt", handleBeforeInstallPrompt);
+      window.removeEventListener("appinstalled", handleAppInstalled);
+      window.removeEventListener("load", register);
+    };
+  }, [url, scope]);
+
+  return null;
+}

package/src/components/pwa/service-worker-updates.ts

@@ -0,0 +1,76 @@
+const UPDATE_CHECK_INTERVAL_MS = 15 * 60_000;
+
+const isEditableElement = (element: Element | null) => {
+  if (!element) return false;
+  const tag = element.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return (element as HTMLElement).isContentEditable;
+};
+
+/** reload ตอนนี้ได้โดยไม่ขัดผู้ใช้ (ไม่มีช่องกรอกที่กำลังพิมพ์) */
+export const canReloadNow = (doc: Document) =>
+  doc.visibilityState === "hidden" || !isEditableElement(doc.activeElement);
+
+/**
+ * ทำให้ service worker ที่ติดตั้งอยู่ตาม deployment ล่าสุดเสมอ
+ *
+ * - ขอให้ browser เช็ค script ใหม่ตอนโหลด, ทุกครั้งที่กลับมาที่แท็บ, และทุก 15 นาที
+ * - worker ฝั่งแอปต้อง `skipWaiting()` + `clients.claim()` (ดู README) → ตัวใหม่คุมหน้าเมื่อติดตั้งเสร็จ
+ *   แล้ว `controllerchange` จะ reload หน้าให้ bundle ใหม่ทำงานทันที — เลื่อน reload เฉพาะขณะผู้ใช้กำลังพิมพ์
+ *   และไม่ reload ตอนติดตั้งครั้งแรก
+ *
+ * คืนฟังก์ชัน cleanup
+ */
+export function watchServiceWorkerUpdates(
+  container: ServiceWorkerContainer,
+  registration: ServiceWorkerRegistration,
+  doc: Document = document,
+  win: Window = window,
+) {
+  const hadController = container.controller !== null;
+  let reloadPending = false;
+  let reloading = false;
+
+  const reload = () => {
+    if (reloading) return;
+    reloading = true;
+    win.location.reload();
+  };
+
+  const tryReload = () => {
+    if (!reloadPending) return;
+    if (canReloadNow(doc)) reload();
+  };
+
+  const handleControllerChange = () => {
+    // ติดตั้งครั้งแรก: หน้านี้รัน bundle ปัจจุบันอยู่แล้ว
+    if (!hadController) return;
+    reloadPending = true;
+    tryReload();
+  };
+
+  const checkForUpdate = () => {
+    if (doc.visibilityState !== "visible") return;
+    void registration.update().catch(() => undefined);
+  };
+
+  const handleVisibilityChange = () => {
+    if (doc.visibilityState === "visible") {
+      checkForUpdate();
+      tryReload();
+    }
+  };
+
+  container.addEventListener("controllerchange", handleControllerChange);
+  doc.addEventListener("visibilitychange", handleVisibilityChange);
+  doc.addEventListener("focusout", tryReload);
+  const interval = win.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS);
+  checkForUpdate();
+
+  return () => {
+    container.removeEventListener("controllerchange", handleControllerChange);
+    doc.removeEventListener("visibilitychange", handleVisibilityChange);
+    doc.removeEventListener("focusout", tryReload);
+    win.clearInterval(interval);
+  };
+}

package/src/components/shared/button/confirm-action-button.tsx

@@ -9,8 +9,15 @@ import {
   type ConfirmSpec,
   normalizeConfirm,
 } from "@suphark/ui/components/shared/confirm-dialog";
+import { useUiText } from "@suphark/ui/components/shared/ui-text";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
+import { toast } from "sonner";
+
+/** ข้อความจาก error ที่แสดงให้ผู้ใช้ได้ (Error.message ที่ไม่ว่าง ไม่งั้นใช้ fallback) */
+export function errorMessage(err: unknown, fallback: string): string {
+  return err instanceof Error && err.message ? err.message : fallback;
+}
 
 /**
  * ปุ่มเดี่ยวที่ถามยืนยัน (ConfirmDialog) ก่อนเรียก server action — ใช้แทน `<form action>` + window.confirm
@@ -33,6 +40,7 @@ export function ConfirmActionButton({
   onDone?: () => void;
 }) {
   const router = useRouter();
+  const text = useUiText();
   const [open, setOpen] = useState(false);
   const [pending, start] = useTransition();
   const spec = normalizeConfirm(confirm);
@@ -61,7 +69,13 @@ export function ConfirmActionButton({
           const fd = new FormData();
           for (const [k, v] of Object.entries(data ?? {})) fd.set(k, v);
           start(async () => {
-            await action(fd);
+            // action โยน error → แจ้งด้วย toast แล้วคง dialog ไว้ให้ลองใหม่ (ไม่ปล่อยขึ้น error boundary ทั้งหน้า)
+            try {
+              await action(fd);
+            } catch (err) {
+              toast.error(errorMessage(err, text.actionFailed ?? "ดำเนินการไม่สำเร็จ"));
+              return;
+            }
             onDone?.();
             setOpen(false);
             router.refresh();

package/src/components/shared/button/delete-many-button.tsx

@@ -15,7 +15,7 @@ import {
 import { buttonVariants } from "@suphark/ui/components/ui/button";
 import type { Table } from "@tanstack/react-table";
 import { Loader2 } from "lucide-react";
-import { useTransition } from "react";
+import { useState, useTransition } from "react";
 import { toast } from "sonner";
 
 interface DeleteManyButtonProps<TData> {
@@ -34,6 +34,7 @@ export function DeleteManyButton<TData>({
   responsive = false,
 }: DeleteManyButtonProps<TData>) {
   const [isPending, startTransition] = useTransition();
+  const [open, setOpen] = useState(false);
   const selectedRows = table.getFilteredSelectedRowModel().rows;
 
   if (selectedRows.length === 0) {
@@ -49,6 +50,9 @@ export function DeleteManyButton<TData>({
           throw new Error(result.error);
         }
         toast.success(`${ids.length} ${itemDescription} deleted successfully.`);
+        // AlertDialogAction ของ Base UI เป็น Button ธรรมดา (ไม่ใช่ Close) → ต้องปิดเอง + ล้างแถวที่เลือก
+        setOpen(false);
+        table.resetRowSelection();
         onSuccess?.();
       } catch (err: any) {
         toast.error(err.message);
@@ -57,7 +61,7 @@ export function DeleteManyButton<TData>({
   }
 
   return (
-    <AlertDialog>
+    <AlertDialog open={open} onOpenChange={(o) => !isPending && setOpen(o)}>
       <AlertDialogTrigger render={<DeleteButton isLoading={isPending} responsive={responsive} />}>
         Delete ({selectedRows.length})
       </AlertDialogTrigger>
@@ -69,7 +73,7 @@ export function DeleteManyButton<TData>({
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogCancel disabled={isPending}>Cancel</AlertDialogCancel>
           <AlertDialogAction
             onClick={handleDelete}
             disabled={isPending}

package/src/components/shared/button/refresh-button.tsx

@@ -27,6 +27,7 @@ export function RefreshButton({
   onClick,
   className,
   variant,
+  isLoading,
   ...props
 }: RefreshButtonProps) {
   const router = useRouter();
@@ -54,7 +55,7 @@ export function RefreshButton({
       icon={buttonIcon}
       onClick={handleClick}
       className={cn(className)}
-      isLoading={props.isLoading || isPending}
+      isLoading={isLoading || isPending}
       {...props}
     >
       {buttonText}

package/src/components/shared/combobox.tsx

@@ -89,7 +89,8 @@ export function Combobox({
               {options.map((option) => (
                 <CommandItem
                   key={option.value}
-                  value={option.label}
+                  // ต่อ value ท้าย label ให้ cmdk แยกรายการที่ label ซ้ำกันได้ (ค้นด้วยรหัสได้ด้วย)
+                  value={`${option.label} ${option.value}`}
                   onSelect={() => {
                     onSelect(option.value === value ? "" : option.value);
                     setOpen(false);

package/src/components/shared/confirm-dialog.tsx

@@ -71,6 +71,7 @@ export function ConfirmDialog({
           <AlertDialogAction
             variant={destructive ? "destructive" : "default"}
             disabled={pending}
+            aria-busy={pending || undefined}
             onClick={onConfirm}
           >
             {pending && <Loader2 className="animate-spin" aria-hidden="true" />}