@suphark/ui 0.11.1 → 0.12.0

package/CHANGELOG.md

@@ -2,10 +2,29 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.12.0] — 2026-09-23
+
+### Added
+
+- **`OrganizationSwitcher` prop `itemAction(org)`** (ขอจาก Pi Auth) — ปุ่มท้ายแถวของแต่ละองค์กรในเมนู เช่น ⚙ "ตั้งค่าองค์กร" แบบ Vercel/Clerk: แอปส่ง element ที่กดได้มาเอง (พร้อม aria-label/title) component ห่อให้และ **หยุด click/keydown ไม่ให้สลับองค์กร**; คืน `null` = แถวนั้นไม่มีปุ่ม; มี `itemAction` แล้วองค์กรเดียวก็ยังมีเมนู (เดิมยุบเป็นป้ายเฉย ๆ เมื่อไม่มี `footer`) — เดิมแอปต้องวาง "ตั้งค่าองค์กร" เป็นรายการแยกใน `footer`
+- **`OrganizationSwitcher` prop `selectableActive`** (ขอจาก Pi Auth) — แถวที่ active กดได้ด้วย เรียก `onSwitch` เหมือนแถวอื่น (ค่าเริ่มต้น false = คงพฤติกรรมเดิม กดแล้วไม่ทำอะไร); สำหรับเมนูที่ "เลือก" = ไปหน้าของสิ่งนั้นไม่ใช่แค่สลับ เช่น crumb บัญชีของ Pi Auth ที่กดชื่อบัญชีแล้วเข้าคอนโซลบัญชีนั้น — ตัดรายการ "คอนโซลบัญชี" ท้ายเมนูที่ซ้ำช่องทางออกได้
+- showcase: หน้า `organization-switcher` ตัวแรกใส่ ⚙ ท้ายแถว; tests 2 กรณี (รวม 130)
+
+## [0.11.2] — 2026-09-22
+
+### Fixed
+
+- **`HeaderCrumbs` บนจอแคบใช้ย้อนกลับ/สลับไม่ได้** (ผู้ใช้ชี้ใน `/shell-top` มือถือ): เดิมซ่อน crumb ก่อนสุดท้ายทั้งก้อนแต่ยังเห็นตัวคั่น `/ /` และไม่มีทางเข้าถึงตัวสลับองค์กร/แอป → บน `< sm` ยุบเป็นปุ่ม `…` (aria-label `collapsedLabel` ค่าเริ่มต้น "แสดงเส้นทางทั้งหมด") เปิด `Popover` แสดง crumb ที่ซ่อนเรียงลงมา — แต่ละตัวยังเป็น switcher ของมันเอง (DropdownMenu ซ้อนใน Popover ทำงานได้ ทดสอบสลับองค์กรใน popover แล้ว); ตัวคั่นซ่อนตามตัวที่ซ่อน
+- `HeaderCrumb`: `overflow-hidden` + label `min-w-0` และ wrapper ตัวสุดท้ายบังคับ `max-w-full` — ตัวสุดท้ายหดตามช่องแทนบานทับ `header.actions`; `badge` ซ่อนบนจอแคบ (`hidden sm:inline`) ให้ที่กับชื่อ
+- `SubNav`: key ของกลุ่มใช้ชื่อกลุ่มแทน index (biome `noArrayIndexKey` — suppression เดิมหลุดตอน 0.11.1 จัดรูปแบบใหม่ ทำให้ `biome ci` ใน CI ไม่ผ่าน)
+- showcase: `/shell-top` header actions ซ่อน LayoutSwitch + กระดิ่งบนจอแคบ (ก่อนหน้ากินที่จน crumb เหลือ 25px); tests 2 กรณี (รวม 128)
+
 ## [0.11.1] — 2026-09-22
 
 ### Changed
 
+- showcase: เพิ่มหน้า stub ให้ลิงก์เมนู mock ที่ไม่มีหน้าจริง (`/shell-top/roles`, `/shell-top/security`, `/shell/bidding`, `/shell/orgs`) — Next prefetch เคย 404 ใน console ทุกครั้งที่เข้า `/shell`, `/shell-top`
+
 - `SubNav` (AppShell layout top): หัวกลุ่มกับรายการเคยเป็นสี muted เท่ากันจนแยกไม่ออก (ผู้ใช้ Pi Auth ชี้ในหน้า Settings) → หัวกลุ่มเป็น `text-[0.7rem] font-semibold uppercase tracking-wider text-muted-foreground/70`, รายการที่ไม่ active เป็น `text-foreground/80` (hover `text-foreground`), กลุ่มที่ 2 ขึ้นไปมีเส้นคั่น `border-t border-border/60` + `pt-3`; active และ `<select>` บนจอแคบคงเดิม — ไม่มี prop ใหม่ (ขอจาก Pi Auth)
 
 ## [0.11.0] — 2026-09-21

package/README.md

@@ -128,6 +128,7 @@ export default async function Layout({ children }) {
 - **`layout="top"`** = แบบ Clerk dashboard: `crumbs={[<HeaderCrumb …/>, …]}` (switcher องค์กร/แอป/สภาพแวดล้อม — ห่อ DropdownMenu เอง), `nav` ชั้นแรกเป็นแท็บบน ชั้นสองเป็น sub-nav ซ้าย, `header.actions` ขวา — ตัวอย่าง `apps/showcase/src/app/shell-top`
 - `header={false}` ไม่มี header · `collapsible="offcanvas"` ซ่อนทั้งแผง (supplychain) · `contentMaxWidth="max-w-5xl"` จำกัดความกว้าง (Pi Auth)
 - `pin={{ pinnedHrefs, onTogglePin }}` เปิดปุ่มปักหมุดเมนู (แอปเก็บ state เอง) · `header.center` วาง pinned menus
+- layout top: `HeaderCrumbs` บนจอแคบเหลือ crumb สุดท้าย + ปุ่ม `…` เปิด popover ให้สลับองค์กร/แอปได้ — `header.actions` ควรซ่อนของไม่จำเป็นบนมือถือ (`hidden sm:inline-flex`) ไม่งั้นแย่งที่ crumb
 - `sidebarHeader` ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน — ใส่ `sidebarHeaderCollapsed` ถ้าต้องการไอคอนแทน (เช่นปุ่ม ⌘K)
 - ของที่ต้องเลื่อนไปกับเมนู (ต้นไม้โฟลเดอร์ยาว, มิเตอร์พื้นที่) ใส่ `sidebarContentBefore` / `sidebarContentAfter` (อยู่ใน SidebarContent) — `sidebarHeader` ตรึงอยู่บนไม่เลื่อน
 - `header.breadcrumbs.labels` รับฟังก์ชัน `(segment, href) => ReactNode` ได้ (ใส่ `t()` ของ next-intl) — **แต่ฟังก์ชันส่งจาก server layout ไม่ได้** (React error "Functions cannot be passed directly to Client Components") ให้ทำ client component ที่เรียก `<HeaderBreadcrumbs labels={…} />` แล้วส่งเป็น `breadcrumbs: <MyBreadcrumbs />` (ดู `apps/showcase/src/app/shell/breadcrumbs.tsx`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.11.1",
+  "version": "0.12.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 เอง",

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

@@ -1,8 +1,10 @@
 "use client";
 
 import { SwitcherChevron } from "@suphark/ui/components/shared/switcher-chevron";
+import { Popover, PopoverContent, PopoverTrigger } from "@suphark/ui/components/ui/popover";
 import { cn } from "@suphark/ui/lib/utils";
-import { type ComponentProps, Fragment, type ReactNode } from "react";
+import { Ellipsis } from "lucide-react";
+import { type ComponentProps, Fragment, type ReactNode, useState } from "react";
 
 /**
  * ปุ่ม "switcher" ใน header แบบ Clerk dashboard (องค์กร ⌄ / แอป ⌄ / สภาพแวดล้อม ⌄)
@@ -34,7 +36,7 @@ export function HeaderCrumb({
     <button
       type="button"
       className={cn(
-        "inline-flex h-8 max-w-56 items-center gap-1.5 rounded-md px-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-popup-open:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+        "inline-flex h-8 max-w-56 items-center gap-1.5 overflow-hidden rounded-md px-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-popup-open:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -42,10 +44,11 @@ export function HeaderCrumb({
       {icon && (
         <span className="flex shrink-0 items-center [&_img]:size-5 [&_img]:rounded">{icon}</span>
       )}
-      <span className="truncate font-medium">{label}</span>
+      <span className="min-w-0 truncate font-medium">{label}</span>
       {hint && <span className="hidden truncate text-muted-foreground md:inline">{hint}</span>}
+      {/* badge ซ่อนบนจอแคบ (ที่เหลือให้ชื่อ) — เห็นได้ในเมนู/popover */}
       {badge && (
-        <span className="shrink-0 rounded-md border bg-muted px-1.5 py-px font-medium text-[0.7rem] text-muted-foreground leading-4">
+        <span className="hidden shrink-0 rounded-md border bg-muted px-1.5 py-px font-medium text-[0.7rem] text-muted-foreground leading-4 sm:inline">
           {badge}
         </span>
       )}
@@ -55,26 +58,84 @@ export function HeaderCrumb({
   );
 }
 
-/** แถว crumbs ใน header: คั่นด้วย `/` จาง ๆ (ซ่อนตัวกลางบนจอแคบให้เหลือตัวสุดท้ายถ้า `collapseOnMobile`) */
+/**
+ * แถว crumbs ใน header: คั่นด้วย `/` จาง ๆ — บนจอแคบ (< sm) เหลือตัวสุดท้าย ส่วนตัวก่อนหน้ายุบเป็นปุ่ม `…`
+ * ที่เปิด popover แสดง crumb ที่ซ่อนเรียงลงมา (แต่ละตัวยังเป็น switcher ของมันเอง) — ไม่งั้นบนมือถือจะสลับ
+ * องค์กร/แอปหรือย้อนกลับผ่าน header ไม่ได้เลย (เดิมซ่อนทั้งก้อนแต่ยังเห็น `/ /`)
+ */
 export function HeaderCrumbs({
   children,
   className,
+  collapsedLabel = "แสดงเส้นทางทั้งหมด",
 }: {
   children: ReactNode[] | ReactNode;
   className?: string;
+  /** aria-label ของปุ่ม `…` บนจอแคบ */
+  collapsedLabel?: string;
 }) {
   const items = (Array.isArray(children) ? children : [children]).filter(Boolean);
+  const hidden = items.slice(0, -1);
+  const [open, setOpen] = useState(false);
   return (
     <div className={cn("flex min-w-0 items-center gap-0.5", className)}>
+      {hidden.length > 0 && (
+        <>
+          <div className="sm:hidden">
+            <Popover open={open} onOpenChange={setOpen}>
+              <PopoverTrigger
+                render={
+                  <button
+                    type="button"
+                    aria-label={collapsedLabel}
+                    className="inline-flex size-8 items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring/50 data-popup-open:bg-accent [&_svg]:size-4"
+                  >
+                    <Ellipsis aria-hidden="true" />
+                  </button>
+                }
+              />
+              <PopoverContent
+                align="start"
+                className="w-64 p-1 [&_button]:w-full [&_button]:max-w-none [&_button]:justify-start"
+              >
+                <div className="flex flex-col gap-0.5">
+                  {hidden.map((item, i) => (
+                    // biome-ignore lint/suspicious/noArrayIndexKey: ลำดับ crumb คงที่
+                    <div key={i} className="min-w-0">
+                      {item}
+                    </div>
+                  ))}
+                </div>
+              </PopoverContent>
+            </Popover>
+          </div>
+          <span
+            aria-hidden="true"
+            className="select-none px-0.5 text-muted-foreground/50 sm:hidden"
+          >
+            /
+          </span>
+        </>
+      )}
       {items.map((item, i) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: ลำดับ crumb คงที่ (องค์กร → แอป → สภาพแวดล้อม)
         <Fragment key={i}>
           {i > 0 && (
-            <span aria-hidden="true" className="select-none px-0.5 text-muted-foreground/50">
+            <span
+              aria-hidden="true"
+              className="hidden select-none px-0.5 text-muted-foreground/50 sm:inline"
+            >
               /
             </span>
           )}
-          <div className={cn("min-w-0", i < items.length - 1 && "hidden sm:block")}>{item}</div>
+          {/* ตัวสุดท้ายบนจอแคบต้องหดได้ (ปุ่มมี max-w-56 — บังคับไม่เกินช่อง ไม่งั้นทับ actions) */}
+          <div
+            className={cn(
+              "flex min-w-0 [&>button]:max-w-full",
+              i < items.length - 1 && "hidden sm:flex",
+            )}
+          >
+            {item}
+          </div>
         </Fragment>
       ))}
     </div>

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

@@ -40,6 +40,16 @@ export interface OrganizationSwitcherProps {
   hint?: (org: OrganizationOption) => ReactNode;
   /** slot ท้ายเมนู เช่น "สร้างองค์กร…", "จัดการองค์กร" */
   footer?: ReactNode;
+  /**
+   * ปุ่มท้ายแถวของแต่ละองค์กร เช่น ⚙ "ตั้งค่าองค์กร" (แบบ Vercel/Clerk) — คืน `null` เพื่อไม่แสดงในแถวนั้น
+   * คลิกแล้ว **ไม่สลับองค์กร** (component หยุด event ให้); ส่ง element ที่กดได้เองและใส่ aria-label/title ด้วย
+   */
+  itemAction?: (org: OrganizationOption) => ReactNode;
+  /**
+   * แถวที่ active กดได้ด้วย (เรียก `onSwitch` เหมือนแถวอื่น) — ค่าเริ่มต้น false = กดแล้วไม่ทำอะไร
+   * ใช้เมื่อ "เลือก" = ไปหน้าของสิ่งนั้น ไม่ใช่แค่สลับ (เช่น crumb บัญชี: กดชื่อบัญชี = เข้าคอนโซลบัญชีนั้น)
+   */
+  selectableActive?: boolean;
   /** `header` = HeaderCrumb ใน header (layout top); `sidebar` = ปุ่มเต็มกว้างใน `sidebarHeader` ของ AppShell */
   placement?: "header" | "sidebar";
   className?: string;
@@ -64,6 +74,8 @@ export function OrganizationSwitcher({
   heading,
   hint = (o) => (o.slug ? `/${o.slug}` : undefined),
   footer,
+  itemAction,
+  selectableActive = false,
   placement = "header",
   className,
 }: OrganizationSwitcherProps) {
@@ -72,7 +84,7 @@ export function OrganizationSwitcher({
   const [pending, start] = useTransition();
   const active = organizations.find((o) => o.id === activeId);
   const label = active ? active.name : (fallbackLabel ?? text.switcher?.choose ?? "เลือกองค์กร");
-  const single = organizations.length <= 1 && !footer;
+  const single = organizations.length <= 1 && !footer && !itemAction;
 
   const trigger =
     placement === "sidebar" ? (
@@ -102,7 +114,7 @@ export function OrganizationSwitcher({
   if (single) return trigger;
 
   function pick(id: string) {
-    if (id === activeId) return;
+    if (id === activeId && !selectableActive) return;
     start(async () => {
       await onSwitch(id);
       if (refresh) router.refresh();
@@ -119,6 +131,7 @@ export function OrganizationSwitcher({
           </DropdownMenuLabel>
           {organizations.map((o) => {
             const isActive = o.id === activeId;
+            const action = itemAction?.(o);
             return (
               <DropdownMenuItem
                 key={o.id}
@@ -134,6 +147,17 @@ export function OrganizationSwitcher({
                   )}
                 </span>
                 {isActive && <Check className="size-4 shrink-0" aria-hidden="true" />}
+                {action && (
+                  // ปุ่มท้ายแถว (⚙) — กดแล้วต้องไม่สลับองค์กร จึงหยุด event ไม่ให้ถึง onClick ของแถว
+                  // biome-ignore lint/a11y/noStaticElementInteractions: ตัวห่อไม่ใช่ปุ่ม — แอปส่ง element ที่กดได้มาเอง
+                  <span
+                    className="-my-1 -mr-1 flex shrink-0 items-center"
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
+                  >
+                    {action}
+                  </span>
+                )}
               </DropdownMenuItem>
             );
           })}

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

@@ -105,9 +105,8 @@ export function SubNav({
           </InputGroup>
         )}
         {sections.map((s, si) => (
-          // biome-ignore lint/suspicious/noArrayIndexKey: กลุ่มคงที่
           <div
-            key={si}
+            key={s.title ?? "_flat"}
             className={cn("flex flex-col gap-0.5", si > 0 && "border-border/60 border-t pt-3")}
           >
             {/* หัวกลุ่มแบบ Clerk/Linear — ตัวเล็ก uppercase จางกว่ารายการ ให้แยกจากรายการได้ชัด (ขอจาก Pi Auth) */}