@pplethai/cli 0.4.1 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pplethai/cli",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "repository": {
     "type": "git",

package/skills/pple-platform/references/design-system.md

@@ -14,14 +14,14 @@ reinventing a design-system setup from `pple-erp` or other older apps.
 import "@pplethai/components/styles.css";
 import "./app.css";
 
-import { Button, Card, CardContent, Logo } from "@pplethai/components";
+import { Button, Card, CardContent, Navbar } from "@pplethai/components";
 ```
 
 Package entry points:
 
 | Import | Contents |
 | ------ | -------- |
-| `@pplethai/components` | UI primitives, layout, brand (`Logo`, …), `cn()`, toasts |
+| `@pplethai/components` | UI primitives, layout, brand (`Navbar`, `Logo`, …), `cn()`, toasts |
 | `@pplethai/components/form` | react-hook-form helpers when you need forms |
 | `@pplethai/components/styles.css` | Brand tokens — import once |
 
@@ -34,6 +34,11 @@ the bare `@pplethai/components` import to `dist/index.js`.
 - Put **page layout** in `web/app.css` (mobile-first, safe-area padding for
   the WebView). Do not fight the design-system stylesheet with a second
   full Tailwind stack unless you need it.
+- Top-level chrome uses Shared `<Navbar>` (see `web/App.tsx`). Do not hand-roll
+  a header/app bar with `Logo`. With a client router, pass `renderHomeLink` /
+  `renderLink` (as in pple-erp); otherwise default `<a href>` links are fine.
+  Navbar is `position: fixed` below the `md` breakpoint — pad the page content
+  accordingly (the template's `.screen` already does).
 - Compose screens from design-system components (`Card`, `Button`, `Input`,
   `Textarea`, `Badge`, `Alert`, …) like the demo cards in `web/App.tsx`.
 - **Colors and type** come from CSS variables in `styles.css`

package/templates/golden-path/package.json

@@ -19,6 +19,7 @@
     "@pplethai/components": "^1.4.3",
     "@pplethai/pple-today-miniapp-sdk": "^0.1.4",
     "hono": "^4.12.30",
+    "lucide-react": "^0.469.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-hook-form": "^7.81.0",

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

@@ -1,20 +1,27 @@
 import {
-  Badge,
   Button,
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  Icon,
   Input,
-  Logo,
+  Navbar,
   Spinner,
   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 { api, apiJson, logout } from "./pple";
 
 function bytes(n: number): string {
   if (n < 1024) return `${n} B`;
@@ -26,35 +33,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 +129,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 +150,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 +159,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 +208,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 +223,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 +236,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) => (
@@ -226,20 +297,20 @@ function NotifyCard() {
       });
       const data = (await res.json().catch(() => ({}))) as { error?: string };
       if (res.ok) {
-        showToast({ title: "Notification sent", variant: "success" });
+        showToast({ title: "ส่งการแจ้งเตือนแล้ว", variant: "success" });
         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: 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,18 +319,27 @@ 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.
+          ส่งการแจ้งเตือนแบบผูกกับกลุ่มผู้ใช้แอป — ส่งเฉพาะเนื้อหา
+          ไม่ส่งหมายเลขโทรศัพท์
         </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)} />
+          <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 || !title.trim() || !body.trim()}>
-            {sending ? <Spinner /> : "Send notification"}
+            {sending ? <Spinner /> : <Icon icon={Send} />}
+            ส่งการแจ้งเตือน
           </Button>
         </div>
       </CardContent>

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.