@pplethai/cli 0.4.1 → 0.5.0

package/templates/golden-path/web/App.tsx

@@ -6,15 +6,35 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Icon,
   Input,
-  Logo,
+  Navbar,
   Spinner,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
   Textarea,
   showToast,
 } from "@pplethai/components";
+import { ChevronDown, LogOut, Plus, Send, Upload, User } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
-import type { Me, Note, UploadedFile } from "../shared/api";
-import { api, apiJson } from "./pple";
+import type {
+  Me,
+  Note,
+  NotificationAudience,
+  NotificationDelivery,
+  NotificationRecipient,
+  UploadedFile,
+} from "../shared/api";
+import { MAX_DIRECT_RECIPIENTS } from "../shared/api";
+import { api, apiJson, logout } from "./pple";
 
 function bytes(n: number): string {
   if (n < 1024) return `${n} B`;
@@ -26,35 +46,89 @@ function message(e: unknown): string {
   return e instanceof Error ? e.message : String(e);
 }
 
+// Starter nav — replace with your routes. With a client router, pass
+// renderHomeLink / renderLink (see pple-erp's Navbar wrapper).
+const NAV_ITEMS = [{ href: "/", label: "หน้าหลัก", end: true }];
+
 export function App() {
   const [me, setMe] = useState<Me | null>(null);
 
   useEffect(() => {
     apiJson<Me>("/api/me").then(setMe).catch((e) => showToast({
-      title: "Could not load your profile",
+      title: "โหลดโปรไฟล์ไม่สำเร็จ",
       description: message(e),
       variant: "error",
     }));
   }, []);
 
+  const displayName = me?.actor.name ?? me?.actor.sub ?? "";
+  const roleLabels = me
+    ? [me.effective.activeRole, ...me.effective.extraRoles]
+    : [];
+
   return (
-    <main className="screen">
-      <header className="appbar">
-        <Logo className="appbar__logo" title="People's Party" />
-        <span className="appbar__title">PPLE App</span>
-        {me && <Badge>{me.actor.name ?? me.actor.sub}</Badge>}
-      </header>
+    <>
+      <Navbar
+        title="PPLE App"
+        pathname={window.location.pathname}
+        items={NAV_ITEMS}
+        mobileMenuAriaLabel={{ open: "เปิดเมนู", close: "ปิดเมนู" }}
+        navAriaLabel="เมนูหลัก"
+      >
+        {me && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="default" className="gap-2">
+                <Icon icon={User} />
+                <span>{displayName}</span>
+                <Icon icon={ChevronDown} size="sm" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-64">
+              <DropdownMenuLabel>
+                <div className="font-medium">{displayName}</div>
+                {me.actor.mobile && (
+                  <div className="text-xs text-muted-foreground font-normal">
+                    {me.actor.mobile}
+                  </div>
+                )}
+                {me.effective.isDelegated && (
+                  <div className="text-xs text-muted-foreground font-normal">
+                    (ปฏิบัติงานแทน — สิทธิ์เป็นของหัวหน้า)
+                  </div>
+                )}
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuLabel className="text-xs text-muted-foreground font-normal">
+                บทบาทของคุณ
+              </DropdownMenuLabel>
+              {roleLabels.map((label) => (
+                <DropdownMenuItem key={label} disabled className="opacity-70">
+                  {label}
+                </DropdownMenuItem>
+              ))}
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={() => void logout()}>
+                <Icon icon={LogOut} />
+                ออกจากระบบ
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
+      </Navbar>
 
-      <div className="stack">
-        <p className="muted">
-          This is the golden-path template. Each card below exercises one
-          platform capability. Replace them with your own app.
-        </p>
-        <NotesCard />
-        <FilesCard />
-        <NotifyCard />
-      </div>
-    </main>
+      <main className="screen">
+        <div className="stack">
+          <p className="muted">
+            นี่คือเทมเพลตเริ่มต้น แต่ละการ์ดด้านล่างแสดงความสามารถหนึ่งอย่างของ
+            แพลตฟอร์ม แทนที่ด้วยแอปของคุณเองได้เลย
+          </p>
+          <NotesCard />
+          <FilesCard />
+          <NotifyCard />
+        </div>
+      </main>
+    </>
   );
 }
 
@@ -68,7 +142,7 @@ function NotesCard() {
     apiJson<{ notes: Note[] }>("/api/notes")
       .then((r) => setNotes(r.notes))
       .catch((e) => {
-        showToast({ title: "Could not load notes", description: message(e), variant: "error" });
+        showToast({ title: "โหลดบันทึกไม่สำเร็จ", description: message(e), variant: "error" });
         // Land on the empty state. Leaving this null would spin forever.
         setNotes([]);
       });
@@ -89,7 +163,7 @@ function NotesCard() {
       setBody("");
       await load();
     } catch (e) {
-      showToast({ title: "Could not save note", description: message(e), variant: "error" });
+      showToast({ title: "บันทึกไม่สำเร็จ", description: message(e), variant: "error" });
     } finally {
       setSaving(false);
     }
@@ -98,32 +172,35 @@ function NotesCard() {
   return (
     <Card className="card">
       <CardHeader>
-        <CardTitle>Notes</CardTitle>
-        <CardDescription>Reads and writes your app's D1 database.</CardDescription>
+        <CardTitle>บันทึก</CardTitle>
+        <CardDescription>อ่านและเขียนฐานข้อมูล D1 ของแอป</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="stack">
           <div className="row">
             <Input
               value={body}
-              placeholder="Write a note…"
+              placeholder="เขียนบันทึก…"
               onChange={(e) => setBody(e.target.value)}
               onKeyDown={(e) => e.key === "Enter" && add()}
             />
             <Button onClick={add} disabled={saving || !body.trim()}>
-              {saving ? <Spinner /> : "Add"}
+              {saving ? <Spinner /> : <Icon icon={Plus} />}
+              เพิ่ม
             </Button>
           </div>
           {notes === null ? (
             <Spinner />
           ) : notes.length === 0 ? (
-            <p className="muted">No notes yet.</p>
+            <p className="muted">ยังไม่มีบันทึก</p>
           ) : (
             <ul className="list">
               {notes.map((n) => (
                 <li key={n.id} className="list__item">
                   <span>{n.body}</span>
-                  <span className="muted">{new Date(n.createdAt).toLocaleString()}</span>
+                  <span className="muted">
+                    {new Date(n.createdAt).toLocaleString("th-TH")}
+                  </span>
                 </li>
               ))}
             </ul>
@@ -144,7 +221,7 @@ function FilesCard() {
     apiJson<{ files: UploadedFile[] }>("/api/files")
       .then((r) => setFiles(r.files))
       .catch((e) => {
-        showToast({ title: "Could not load files", description: message(e), variant: "error" });
+        showToast({ title: "โหลดไฟล์ไม่สำเร็จ", description: message(e), variant: "error" });
         // Land on the empty state. Leaving this null would spin forever.
         setFiles([]);
       });
@@ -159,11 +236,11 @@ function FilesCard() {
       const fd = new FormData();
       fd.append("file", file);
       const res = await api("/api/files", { method: "POST", body: fd });
-      if (!res.ok) throw new Error(`upload failed (${res.status})`);
+      if (!res.ok) throw new Error(`อัปโหลดไม่สำเร็จ (${res.status})`);
       if (inputRef.current) inputRef.current.value = "";
       await load();
     } catch (e) {
-      showToast({ title: "Could not upload file", description: message(e), variant: "error" });
+      showToast({ title: "อัปโหลดไฟล์ไม่สำเร็จ", description: message(e), variant: "error" });
     } finally {
       setUploading(false);
     }
@@ -172,27 +249,34 @@ function FilesCard() {
   return (
     <Card className="card">
       <CardHeader>
-        <CardTitle>Files</CardTitle>
-        <CardDescription>Uploads to your app's R2 bucket.</CardDescription>
+        <CardTitle>ไฟล์</CardTitle>
+        <CardDescription>อัปโหลดไปยังบัคเก็ต R2 ของแอป</CardDescription>
       </CardHeader>
       <CardContent>
         <div className="stack">
           <div className="row">
-            {/* Disabled while uploading, so picking a second file can't start
-                a concurrent upload. */}
+            {/* Hidden native picker; the design-system Button opens it. Disabled
+                while uploading so a second pick can't start a concurrent upload. */}
             <input
               ref={inputRef}
               type="file"
-              className="file-input"
+              className="hidden"
               onChange={upload}
               disabled={uploading}
             />
-            {uploading && <Spinner />}
+            <Button
+              variant="outline"
+              disabled={uploading}
+              onClick={() => inputRef.current?.click()}
+            >
+              {uploading ? <Spinner /> : <Icon icon={Upload} />}
+              เลือกไฟล์
+            </Button>
           </div>
           {files === null ? (
             <Spinner />
           ) : files.length === 0 ? (
-            <p className="muted">No files yet.</p>
+            <p className="muted">ยังไม่มีไฟล์</p>
           ) : (
             <ul className="list">
               {files.map((f) => (
@@ -209,37 +293,101 @@ function FilesCard() {
   );
 }
 
-// --- Audience-bound notifications ----------------------------------------
+// --- Notifications: Broadcast and Direct ----------------------------------
+//
+// Two modes, one card. The audience is always stated — there is no way to
+// start a send from this UI without choosing one, which mirrors the schema in
+// shared/api.ts, where leaving it out is a compile error.
+
+/** Builder-facing Thai for every refusal this card can receive. */
+const NOTIFY_ERRORS: Record<string, string> = {
+  // This app's own Zod check (src/index.ts), before anything is sent.
+  invalid_body: `ข้อมูลไม่ครบหรือไม่ถูกต้อง — ต้องมีหัวข้อ ข้อความ และกลุ่มผู้รับ ไม่เกิน ${MAX_DIRECT_RECIPIENTS} คน`,
+  invalid_request: "คำขอไม่ถูกต้อง — ตรวจสอบว่าระบุกลุ่มผู้รับแล้ว",
+  invalid_recipients: `รายชื่อผู้รับไม่ถูกต้อง — ต้องมีอย่างน้อยหนึ่งคน ไม่เกิน ${MAX_DIRECT_RECIPIENTS} คน และหนึ่งบรรทัดระบุได้อย่างเดียวระหว่าง sub กับเบอร์โทรศัพท์`,
+  idempotency_key_conflict: "คีย์กันส่งซ้ำถูกใช้กับรายชื่อจำนวนอื่นไปแล้ว",
+  quota_exceeded: "โควตาการแจ้งเตือนหมด — ยังไม่มีใครได้รับข้อความนี้ ลองใหม่หลังโควตารีเซ็ต",
+  not_permitted: "คีย์การแจ้งเตือนนี้ไม่มีสิทธิ์ส่งผ่านช่องทางนี้",
+  send_failed: "ส่งไม่สำเร็จ",
+};
+
+/**
+ * One entry per line (commas work too). An entry that is all digits — with or
+ * without a leading `+` — is sent as a mobile number; anything else as a PPLE
+ * ID `sub`. Never both in one entry: the platform refuses those.
+ */
+function parseRecipients(text: string): NotificationRecipient[] {
+  return text
+    .split(/[\n,]/)
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .map((entry) =>
+      /^\+?[\d\s-]+$/.test(entry)
+        ? { phone: entry.replace(/[\s-]/g, "") }
+        : { sub: entry },
+    );
+}
+
+function recipientLabel(r: NotificationRecipient): string {
+  return "sub" in r ? r.sub : r.phone;
+}
+
 function NotifyCard() {
+  const [kind, setKind] = useState<NotificationAudience["kind"]>("all");
+  const [recipientsText, setRecipientsText] = useState("");
   const [title, setTitle] = useState("");
   const [body, setBody] = useState("");
   const [sending, setSending] = useState(false);
+  const [results, setResults] = useState<NotificationDelivery[] | null>(null);
+
+  const recipients = parseRecipients(recipientsText);
+  // The cap is the platform's, and going over it is a refusal rather than a
+  // truncation — so hold the send here and say so, rather than letting a
+  // Builder discover it from an error toast.
+  const tooMany = recipients.length > MAX_DIRECT_RECIPIENTS;
+  const ready =
+    !!title.trim() &&
+    !!body.trim() &&
+    (kind === "all" || (recipients.length > 0 && !tooMany));
 
   async function send() {
-    if (!title.trim() || !body.trim()) return;
+    if (!ready) return;
     setSending(true);
+    setResults(null);
     try {
+      // The audience travels with the send, always. Choosing it is the first
+      // thing this form does, not an afterthought a dropped field can undo.
+      const audience: NotificationAudience =
+        kind === "all" ? { kind: "all" } : { kind: "direct", recipients };
       const res = await api("/api/notify", {
         method: "POST",
         headers: { "content-type": "application/json" },
-        body: JSON.stringify({ title, body }),
+        body: JSON.stringify({ audience, title, body }),
       });
-      const data = (await res.json().catch(() => ({}))) as { error?: string };
+      const data = (await res.json().catch(() => ({}))) as {
+        error?: string;
+        results?: NotificationDelivery[];
+      };
       if (res.ok) {
-        showToast({ title: "Notification sent", variant: "success" });
+        showToast({ title: "ส่งการแจ้งเตือนแล้ว", variant: "success" });
+        setResults(data.results ?? null);
         setTitle("");
         setBody("");
       } else if (data.error === "notifications_not_configured") {
         showToast({
-          title: "Notifications not configured",
-          description: "Set NOTIFY_API_BASE and NOTIFY_API_KEY to send for real.",
+          title: "ยังไม่ได้ตั้งค่าการแจ้งเตือน",
+          description: "ตั้งค่า NOTIFY_API_BASE และ NOTIFY_API_KEY เพื่อส่งจริง",
           variant: "warning",
         });
       } else {
-        showToast({ title: "Could not send", description: data.error, variant: "error" });
+        showToast({
+          title: "ส่งไม่สำเร็จ",
+          description: NOTIFY_ERRORS[data.error ?? ""] ?? data.error,
+          variant: "error",
+        });
       }
     } catch (e) {
-      showToast({ title: "Could not send", description: message(e), variant: "error" });
+      showToast({ title: "ส่งไม่สำเร็จ", description: message(e), variant: "error" });
     } finally {
       setSending(false);
     }
@@ -248,19 +396,81 @@ function NotifyCard() {
   return (
     <Card className="card">
       <CardHeader>
-        <CardTitle>Notify your users</CardTitle>
+        <CardTitle>แจ้งเตือนผู้ใช้</CardTitle>
         <CardDescription>
-          Sends an audience-bound push to your App Users — content only, no
-          phone numbers.
+          ส่งถึงผู้ใช้ของแอปนี้ — ทุกคน หรือระบุรายบุคคลด้วย PPLE ID (sub)
+          หรือเบอร์โทรศัพท์ การระบุชื่อเป็นการ<em>จำกัด</em>ผู้รับให้แคบลงเท่านั้น
+          ไม่เคยขยายออก คนที่ยังไม่เคยเปิดแอปนี้จะไม่ได้รับ
         </CardDescription>
       </CardHeader>
       <CardContent>
         <div className="stack">
-          <Input value={title} placeholder="Title" onChange={(e) => setTitle(e.target.value)} />
-          <Textarea value={body} placeholder="Message" onChange={(e) => setBody(e.target.value)} />
-          <Button onClick={send} disabled={sending || !title.trim() || !body.trim()}>
-            {sending ? <Spinner /> : "Send notification"}
+          <Tabs
+            value={kind}
+            onValueChange={(v) => {
+              setKind(v as NotificationAudience["kind"]);
+              setResults(null);
+            }}
+          >
+            <TabsList>
+              <TabsTrigger value="all">การแจ้งเตือนทุกคน</TabsTrigger>
+              <TabsTrigger value="direct">การแจ้งเตือนรายบุคคล</TabsTrigger>
+            </TabsList>
+            <TabsContent value="all">
+              <p className="muted">
+                ส่งถึงผู้ใช้แอปนี้ทุกคน — นับโควตาตามจำนวนผู้รับทั้งหมด
+              </p>
+            </TabsContent>
+            <TabsContent value="direct">
+              <div className="stack">
+                <Textarea
+                  value={recipientsText}
+                  placeholder={"บรรทัดละหนึ่งคน\n0812345678\nu-42"}
+                  onChange={(e) => setRecipientsText(e.target.value)}
+                />
+                <p className="muted">
+                  ระบุได้สูงสุด {MAX_DIRECT_RECIPIENTS} คนต่อครั้ง (ตอนนี้{" "}
+                  {recipients.length} คน{tooMany ? " — เกินจำนวน ต้องแบ่งส่งเป็นรอบ" : ""})
+                  — ทุกชื่อที่ระบุถูกนับโควตา แม้จะส่งไม่ถึง
+                  จึงควรตัดรายชื่อที่ส่งไม่ถึงออก
+                </p>
+              </div>
+            </TabsContent>
+          </Tabs>
+          <Input
+            value={title}
+            placeholder="หัวข้อ"
+            onChange={(e) => setTitle(e.target.value)}
+          />
+          <Textarea
+            value={body}
+            placeholder="ข้อความ"
+            onChange={(e) => setBody(e.target.value)}
+          />
+          <Button onClick={send} disabled={sending || !ready}>
+            {sending ? <Spinner /> : <Icon icon={Send} />}
+            ส่งการแจ้งเตือน
           </Button>
+          {results && (
+            <div className="stack">
+              <ul className="list">
+                {results.map((r, i) => (
+                  <li key={`${recipientLabel(r.recipient)}-${i}`} className="list__item">
+                    <span>{recipientLabel(r.recipient)}</span>
+                    <Badge variant={r.status === "delivered" ? "default" : "outline"}>
+                      {r.status === "delivered" ? "ส่งแล้ว" : "ส่งไม่ถึง"}
+                    </Badge>
+                  </li>
+                ))}
+              </ul>
+              {/* One collapsed reason, on purpose: the app is never told which
+                  of these applies (docs/adr/0017). Do not guess in the UI. */}
+              <p className="muted">
+                “ส่งไม่ถึง” หมายถึงยังไม่เคยเปิดแอปนี้ อยู่นอกกลุ่มผู้รับ
+                ไม่มีบัญชี PPLE ID หรือปิดรับการแจ้งเตือน — ระบบไม่ระบุว่าเป็นข้อใด
+              </p>
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>

package/templates/golden-path/web/app.css

@@ -17,34 +17,23 @@ body {
   max-width: 640px;
   margin: 0 auto;
   padding: 16px;
+  /* Navbar is position:fixed below the md breakpoint; give content room. */
+  padding-top: 4.5rem;
   padding-bottom: max(16px, env(safe-area-inset-bottom));
   min-height: 100vh;
 }
 
+@media (min-width: 768px) {
+  .screen {
+    padding-top: 16px;
+  }
+}
+
 .screen--center {
   display: grid;
   place-items: center;
 }
 
-.appbar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 4px 16px;
-}
-
-.appbar__logo {
-  height: 28px;
-  width: auto;
-  color: #ff6a13; /* brand primary */
-}
-
-.appbar__title {
-  font-weight: 600;
-  font-size: 18px;
-  margin-right: auto;
-}
-
 .stack {
   display: flex;
   flex-direction: column;
@@ -86,7 +75,9 @@ body {
   font-size: 14px;
 }
 
-.file-input {
-  flex: 1;
-  min-width: 0;
+/* Icon defaults to text-foreground, which overrides the parent Button text
+   colour (primary-foreground on filled buttons, …). Inherit so the glyph
+   matches its label — including hover states on outline/ghost buttons. */
+button svg.text-foreground {
+  color: inherit;
 }

package/templates/golden-path/web/main.tsx

@@ -26,7 +26,7 @@ function ErrorScreen({ message }: { message: string }) {
   return (
     <main className="screen screen--center">
       <Alert variant="destructive" className="card">
-        <AlertTitle>Could not start</AlertTitle>
+        <AlertTitle>เริ่มต้นแอปไม่สำเร็จ</AlertTitle>
         <AlertDescription>{message}</AlertDescription>
       </Alert>
     </main>

package/templates/golden-path/web/pple.ts

@@ -30,6 +30,7 @@ export type Bootstrap =
   | { kind: "error"; message: string };
 
 let token: string | null = null;
+let sdk: PPLEMiniApp | null = null;
 
 /** Establish the session. Call once at startup, before rendering the app. */
 export async function bootstrap(): Promise<Bootstrap> {
@@ -48,11 +49,11 @@ export async function bootstrap(): Promise<Bootstrap> {
       return {
         kind: "error",
         message:
-          "This app is misconfigured: its PPLE ID sign-in settings were not set when it was built. Redeploy the app from the platform to fix it.",
+          "แอปตั้งค่าไม่ถูกต้อง: การตั้งค่าเข้าสู่ระบบ PPLE ID ไม่ได้ถูกตั้งตอนสร้างแอป โปรดดีพลอยใหม่จากแพลตฟอร์ม",
       };
     }
 
-    const sdk = new PPLEMiniApp({
+    sdk = new PPLEMiniApp({
       oauthUrl: OAUTH_URL,
       oauthClientId: OAUTH_CLIENT_ID,
       oauthRedirectUri: OAUTH_REDIRECT_URI,
@@ -65,6 +66,16 @@ export async function bootstrap(): Promise<Bootstrap> {
   }
 }
 
+/** Drop the session and return to the start (re-triggers PPLE ID login). */
+export async function logout(): Promise<void> {
+  token = null;
+  if (sdk) {
+    await sdk.logout();
+    sdk = null;
+  }
+  window.location.href = "/";
+}
+
 /**
  * Call your Worker API with the bearer token attached. Paths are relative
  * ("/api/notes"), since the SPA and the Worker share one origin.