@suphark/ui 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.3.1] — 2026-09-18
+
+### Changed
+
+- `AppShell`: slot `sidebarHeader` ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน (เดิมล้นทับเนื้อหา — รายงานจาก Pi Auth) + prop ใหม่ `sidebarHeaderCollapsed` สำหรับไอคอนแทนตอนยุบ
+- `HeaderBreadcrumbs`: `labels` รับฟังก์ชัน `(segment, href) => ReactNode` ได้ (ใส่ `t()` ของ next-intl) และ map รับ ReactNode — ฟังก์ชันต้องมาจาก client component (ส่งจาก server layout จะได้ 500 "Functions cannot be passed directly to Client Components"; showcase สาธิตด้วย `breadcrumbs: <ShellBreadcrumbs />`)
+- README: อธิบายว่า `ThemeMenuItems` มี group + หัวในตัว ไม่ต้องห่อเอง
+
 ## [0.3.0] — 2026-09-18
 
 ### Added

package/README.md

@@ -113,6 +113,9 @@ export default async function Layout({ children }) {
 
 - `header={false}` ไม่มี header · `collapsible="offcanvas"` ซ่อนทั้งแผง (supplychain) · `contentMaxWidth="max-w-5xl"` จำกัดความกว้าง (Pi Auth)
 - `pin={{ pinnedHrefs, onTogglePin }}` เปิดปุ่มปักหมุดเมนู (แอปเก็บ state เอง) · `header.center` วาง pinned menus
+- `sidebarHeader` ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน — ใส่ `sidebarHeaderCollapsed` ถ้าต้องการไอคอนแทน (เช่นปุ่ม ⌘K)
+- `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`)
+- `<UserMenu>` children คือรายการเมนู: `ThemeMenuItems` มี `DropdownMenuGroup` + หัว "ธีม" ในตัวแล้ว (ปรับข้อความด้วย `label`/`labels`) ไม่ต้องห่อเพิ่ม; รายการอื่นใส่ `DropdownMenuItem`/`DropdownMenuGroup` เอง
 - ตัวอย่างรันได้ที่ `apps/showcase/src/app/shell`
 
 ### สีแบรนด์ต่อ tenant/แอป (`--brand`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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/app-shell.tsx

@@ -43,8 +43,10 @@ export interface AppShellProps {
   searchPlaceholder?: string;
   /** ปุ่ม pin เมนูขึ้น header (แอปเก็บ state เอง) */
   pin?: AppNavPinProps;
-  /** ส่วนเพิ่มใน sidebar ใต้โลโก้ เช่น TenantSwitcher / CommandPalette */
+  /** ส่วนเพิ่มใน sidebar ใต้โลโก้ เช่น TenantSwitcher / CommandPalette — ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน */
   sidebarHeader?: ReactNode;
+  /** สิ่งที่แสดงแทน `sidebarHeader` ตอนยุบเป็นไอคอน (เช่นปุ่มไอคอน ⌘K) — ไม่ส่ง = ไม่แสดงอะไร */
+  sidebarHeaderCollapsed?: ReactNode;
   /** ท้าย sidebar — ปกติคือ `<UserMenu variant="sidebar" />` */
   sidebarFooter?: ReactNode;
   /**
@@ -96,6 +98,7 @@ export function AppShell({
   searchPlaceholder = "ค้นหาเมนู…",
   pin,
   sidebarHeader,
+  sidebarHeaderCollapsed,
   sidebarFooter,
   header = true,
   brandColor,
@@ -133,6 +136,7 @@ export function AppShell({
         searchPlaceholder={searchPlaceholder}
         pin={pin}
         sidebarHeader={sidebarHeader}
+        sidebarHeaderCollapsed={sidebarHeaderCollapsed}
         sidebarFooter={sidebarFooter}
         collapsible={collapsible}
       />
@@ -195,6 +199,7 @@ function ShellSidebar({
   searchPlaceholder,
   pin,
   sidebarHeader,
+  sidebarHeaderCollapsed,
   sidebarFooter,
   collapsible,
 }: Pick<
@@ -205,6 +210,7 @@ function ShellSidebar({
   | "searchPlaceholder"
   | "pin"
   | "sidebarHeader"
+  | "sidebarHeaderCollapsed"
   | "sidebarFooter"
   | "collapsible"
 >) {
@@ -249,7 +255,12 @@ function ShellSidebar({
             </InputGroup>
           </div>
         )}
-        {sidebarHeader}
+        {sidebarHeader && (
+          <div className="group-data-[collapsible=icon]:hidden">{sidebarHeader}</div>
+        )}
+        {sidebarHeaderCollapsed && (
+          <div className="hidden group-data-[collapsible=icon]:block">{sidebarHeaderCollapsed}</div>
+        )}
       </SidebarHeader>
       <SidebarContent>
         <AppNav nav={visibleNav} pin={pin} forceOpen={searching} />

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

@@ -10,11 +10,18 @@ import {
 } from "@suphark/ui/components/ui/breadcrumb";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { Fragment } from "react";
+import { Fragment, type ReactNode } from "react";
 
 export interface HeaderBreadcrumbsProps {
-  /** ชื่อแสดงของแต่ละ segment (`{ "po-tracking": "PO Tracking" }`) — ไม่พบ = ตัวแรกพิมพ์ใหญ่ แทน - ด้วยช่องว่าง */
-  labels?: Record<string, string>;
+  /**
+   * ชื่อแสดงของแต่ละ segment: map (`{ "po-tracking": "PO Tracking" }`) หรือฟังก์ชัน
+   * `(segment, href) => ReactNode | undefined` (เช่น t() ของ next-intl)
+   * คืน undefined/ไม่พบ = ตัวแรกพิมพ์ใหญ่ แทน - ด้วยช่องว่าง
+   *
+   * ระวัง: ฟังก์ชันส่งข้าม server→client boundary ไม่ได้ ("Functions cannot be passed directly to Client Components")
+   * ถ้า layout เป็น server component ให้ใช้ map หรือส่ง `breadcrumbs: <MyBreadcrumbs />` ที่เป็น client component เรียก HeaderBreadcrumbs เอง
+   */
+  labels?: Record<string, ReactNode> | ((segment: string, href: string) => ReactNode | undefined);
   homeHref?: string;
   homeLabel?: string;
   /** ตัด segment นำหน้าออก เช่น `["console"]` เมื่อทุกหน้าอยู่ใต้ /console */
@@ -25,9 +32,9 @@ export interface HeaderBreadcrumbsProps {
 
 const ID_LIKE = /^(\d+|[0-9a-f]{8}-[0-9a-f-]{27}|c[a-z0-9]{20,}|[0-9a-z]{16,})$/i;
 
-function labelOf(segment: string, labels?: Record<string, string>) {
-  const known = labels?.[segment];
-  if (known) return known;
+function labelOf(segment: string, href: string, labels?: HeaderBreadcrumbsProps["labels"]) {
+  const known = typeof labels === "function" ? labels(segment, href) : labels?.[segment];
+  if (known !== undefined && known !== null && known !== "") return known;
   const decoded = decodeURIComponent(segment);
   return decoded.charAt(0).toUpperCase() + decoded.slice(1).replace(/-/g, " ");
 }
@@ -56,7 +63,7 @@ export function HeaderBreadcrumbs({
         {shown.length > 0 && <BreadcrumbSeparator className="hidden md:block" />}
         {shown.map(({ segment, href }, index) => {
           const isLast = index === shown.length - 1;
-          const label = labelOf(segment, labels);
+          const label = labelOf(segment, href, labels);
           return (
             <Fragment key={href}>
               <BreadcrumbItem>