@suphark/ui 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -2,12 +2,25 @@
 
 รูปแบบตาม [Keep a Changelog](https://keepachangelog.com/) · semver: patch = หน้าตา/บั๊ก, minor = component/prop ใหม่, major = เปลี่ยน/ลบ props
 
+## [0.11.1] — 2026-09-22
+
+### Changed
+
+- `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
+
+### Added
+
+- `AppShell` (layout sidebar): slot **`sidebarContentBefore`** / **`sidebarContentAfter`** วางใน `SidebarContent` ก่อน/หลังเมนู — เลื่อนไปกับเมนู (ต่างจาก `sidebarHeader` ที่ตรึงบน) ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน; สำหรับต้นไม้โฟลเดอร์ + ถังขยะ + มิเตอร์พื้นที่แบบ Google Drive (ขอจาก Pi Files — เดิมต้องยัดใน `sidebarHeader` แล้วจำกัด max-h เอง)
+- showcase: `/shell` ใส่ `TreeView` + `ProgressBar` ใน `sidebarContentAfter` เป็นตัวอย่าง (`app/shell/sidebar-drive.tsx`)
+
 ## [0.10.0] — 2026-09-21
 
 ### Added
 
 - **`SectionNav`** (`@suphark/ui/next`, สเปกจาก Pi Auth — ชิ้นสุดท้ายที่แอปยังประกอบเอง) — หัวหมวด + แถบแท็บย่อยใต้หัวข้อสำหรับ layout ของหมวดที่มีหลายหน้า (directory/access/security/integrations): `title`/`description`/`actions` ส่งต่อ `PageHeader`, `tabs[{ href? | slug?, label, exact?, badge? }]` (href หรือ `${base}/${slug}`), แต่ละแท็บเป็น `NavLink` (`-mb-px border-b-2` ไฮไลต์ `border-primary` ตาม pathname, `aria-current=page`), badge ต่อท้าย label, `navLabel` (ค่าเริ่มต้น `UiText.sectionNav.tabs` — "แท็บย่อย"/"Section tabs"), ไม่มี tabs = ไม่มี nav; ไม่มี state ใช้จาก server component ได้ (เฉพาะแถบ `<nav>` เป็น client component เล็ก ๆ เพื่ออ่าน UiText); types `SectionNavProps`, `SectionNavTab`; `UiText.sectionNav` (optional)
-- showcase: หน้า `section-nav` — 97 หน้า; tests 3 กรณี (รวม 126)
+- showcase: หน้า `section-nav` (แท็บชี้หน้าจริงในหมวดนำทาง — Link prefetch จะไม่ 404) — 97 หน้า; tests 3 กรณี (รวม 126)
 
 ## [0.9.0] — 2026-09-21
 

package/README.md

@@ -129,6 +129,7 @@ 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)
+- ของที่ต้องเลื่อนไปกับเมนู (ต้นไม้โฟลเดอร์ยาว, มิเตอร์พื้นที่) ใส่ `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`)
 - `<UserMenu>` children คือรายการเมนู: `ThemeMenuItems` มี `DropdownMenuGroup` + หัว "ธีม" ในตัวแล้ว (ปรับข้อความด้วย `label`/`labels`) ไม่ต้องห่อเพิ่ม; รายการอื่นใส่ `DropdownMenuItem`/`DropdownMenuGroup` เอง
 - ตัวอย่างรันได้ที่ `apps/showcase/src/app/shell`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@suphark/ui",
-  "version": "0.10.0",
+  "version": "0.11.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

@@ -65,6 +65,12 @@ export interface AppShellProps {
   sidebarHeader?: ReactNode;
   /** สิ่งที่แสดงแทน `sidebarHeader` ตอนยุบเป็นไอคอน (เช่นปุ่มไอคอน ⌘K) — ไม่ส่ง = ไม่แสดงอะไร */
   sidebarHeaderCollapsed?: ReactNode;
+  /**
+   * ส่วนเพิ่มใน `SidebarContent` ก่อน/หลังเมนู — เลื่อนไปกับเมนู (ต่างจาก `sidebarHeader` ที่ตรึงอยู่บน)
+   * เช่น ต้นไม้โฟลเดอร์ + มิเตอร์พื้นที่แบบ Drive (Pi Files); ซ่อนอัตโนมัติเมื่อยุบเป็นไอคอน
+   */
+  sidebarContentBefore?: ReactNode;
+  sidebarContentAfter?: ReactNode;
   /** ท้าย sidebar — ปกติคือ `<UserMenu variant="sidebar" />` */
   sidebarFooter?: ReactNode;
   /**
@@ -137,6 +143,8 @@ function SidebarShell({
   pin,
   sidebarHeader,
   sidebarHeaderCollapsed,
+  sidebarContentBefore,
+  sidebarContentAfter,
   sidebarFooter,
   header = true,
   brandColor,
@@ -176,6 +184,8 @@ function SidebarShell({
         pin={pin}
         sidebarHeader={sidebarHeader}
         sidebarHeaderCollapsed={sidebarHeaderCollapsed}
+        sidebarContentBefore={sidebarContentBefore}
+        sidebarContentAfter={sidebarContentAfter}
         sidebarFooter={sidebarFooter}
         collapsible={collapsible}
       />
@@ -344,6 +354,8 @@ function ShellSidebar({
   pin,
   sidebarHeader,
   sidebarHeaderCollapsed,
+  sidebarContentBefore,
+  sidebarContentAfter,
   sidebarFooter,
   collapsible,
 }: Pick<
@@ -355,6 +367,8 @@ function ShellSidebar({
   | "pin"
   | "sidebarHeader"
   | "sidebarHeaderCollapsed"
+  | "sidebarContentBefore"
+  | "sidebarContentAfter"
   | "sidebarFooter"
   | "collapsible"
 >) {
@@ -407,7 +421,13 @@ function ShellSidebar({
         )}
       </SidebarHeader>
       <SidebarContent>
+        {sidebarContentBefore && (
+          <div className="px-2 group-data-[collapsible=icon]:hidden">{sidebarContentBefore}</div>
+        )}
         <AppNav nav={visibleNav} pin={pin} forceOpen={searching} />
+        {sidebarContentAfter && (
+          <div className="px-2 group-data-[collapsible=icon]:hidden">{sidebarContentAfter}</div>
+        )}
       </SidebarContent>
       {sidebarFooter && <SidebarFooter>{sidebarFooter}</SidebarFooter>}
       {collapsible !== "none" && <SidebarRail />}

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

@@ -106,9 +106,13 @@ export function SubNav({
         )}
         {sections.map((s, si) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: กลุ่มคงที่
-          <div key={si} className="flex flex-col gap-0.5">
+          <div
+            key={si}
+            className={cn("flex flex-col gap-0.5", si > 0 && "border-border/60 border-t pt-3")}
+          >
+            {/* หัวกลุ่มแบบ Clerk/Linear — ตัวเล็ก uppercase จางกว่ารายการ ให้แยกจากรายการได้ชัด (ขอจาก Pi Auth) */}
             {s.title && (
-              <p className="px-2 pt-1 pb-0.5 font-medium text-muted-foreground text-xs">
+              <p className="px-2 pt-1 pb-1 font-semibold text-[0.7rem] text-muted-foreground/70 uppercase tracking-wider">
                 {s.title}
               </p>
             )}
@@ -123,7 +127,7 @@ export function SubNav({
                     "flex items-center gap-2 rounded-md px-2 py-1.5 text-sm no-underline outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring/50 [&_svg:not([class*='size-'])]:size-4",
                     active
                       ? "bg-accent font-medium text-accent-foreground"
-                      : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+                      : "text-foreground/80 hover:bg-accent/60 hover:text-foreground",
                   )}
                 >
                   {i.icon}