From fb495aa86cb31f7358a565db0c0ba21505bc5c30 Mon Sep 17 00:00:00 2001
From: Desmenez <gobpk03@gmail.com>
Date: Fri, 26 Sep 2025 11:18:36 +0700
Subject: [PATCH 1/2] feat: add custom banner

---
 examples/erp/genseki/collections/posts.tsx    |  4 ++++
 examples/erp/genseki/collections/tags.ts      |  4 ++++
 packages/react/src/core/collection/index.tsx  |  5 +++++
 .../react/views/collections/list/banner.tsx   |  6 ++++--
 .../react/views/collections/list/context.tsx  | 19 +++++++++++++++++--
 .../react/views/collections/list/default.tsx  |  6 +++++-
 6 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/examples/erp/genseki/collections/posts.tsx b/examples/erp/genseki/collections/posts.tsx
index b8f04818..6524cc9c 100644
--- a/examples/erp/genseki/collections/posts.tsx
+++ b/examples/erp/genseki/collections/posts.tsx
@@ -226,6 +226,10 @@ export const postsCollection = createPlugin('posts', (app) => {
           create: true,
           delete: true,
         },
+        banner: {
+          title: 'Posts Banner',
+          description: 'A collection of posts',
+        },
         layout: Layout,
         page: CustomListPage,
       })
diff --git a/examples/erp/genseki/collections/tags.ts b/examples/erp/genseki/collections/tags.ts
index de979b57..a0395ed2 100644
--- a/examples/erp/genseki/collections/tags.ts
+++ b/examples/erp/genseki/collections/tags.ts
@@ -32,6 +32,10 @@ export const tagsCollection = createPlugin('tags', (app) => {
           create: true,
           delete: true,
         },
+        banner: {
+          title: 'Tags Banner',
+          description: 'A collection of tags',
+        },
       })
     )
     .addPageAndApiRouter(collection.create(fields, {}))
diff --git a/packages/react/src/core/collection/index.tsx b/packages/react/src/core/collection/index.tsx
index 6ae074d5..dca94910 100644
--- a/packages/react/src/core/collection/index.tsx
+++ b/packages/react/src/core/collection/index.tsx
@@ -346,6 +346,10 @@ export type CollectionListConfig<
    * @param actions will decide whether or not to show actios in `list` view screen, This is not related to available features of collection, but rather only visible UI part of the `list` page
    */
   toolbar?: CollectionToolbarActions
+  banner?: {
+    title?: string
+    description?: string
+  }
 }
 
 export type CollectionUpdateApiArgs<
@@ -599,6 +603,7 @@ export class CollectionBuilder<
                 search={config.configuration?.search}
                 sortBy={config.configuration?.sortBy}
                 toolbar={config.toolbar}
+                banner={config.banner}
               >
                 <Layout>{page}</Layout>
               </CollectionListProvider>
diff --git a/packages/react/src/react/views/collections/list/banner.tsx b/packages/react/src/react/views/collections/list/banner.tsx
index f1376733..28147596 100644
--- a/packages/react/src/react/views/collections/list/banner.tsx
+++ b/packages/react/src/react/views/collections/list/banner.tsx
@@ -7,6 +7,8 @@ import { formatSlug } from '../../../utils/format-slug'
 
 interface BannerProps {
   slug: string
+  title?: string
+  description?: string
 }
 
 export function Banner(props: BannerProps) {
@@ -29,10 +31,10 @@ export function Banner(props: BannerProps) {
         </div>
         <div className="flex flex-col justify-center">
           <Typography type="h2" weight="bold" className="text-text-primary leading-[100%]">
-            {formatSlug(props.slug)}
+            {props.title ?? formatSlug(props.slug)}
           </Typography>
           <Typography type="h4" weight="normal" className="text-text-secondary leading-[140%]">
-            A collection
+            {props.description ?? 'A collection'}
           </Typography>
         </div>
       </div>
diff --git a/packages/react/src/react/views/collections/list/context.tsx b/packages/react/src/react/views/collections/list/context.tsx
index 891d714a..98b60407 100644
--- a/packages/react/src/react/views/collections/list/context.tsx
+++ b/packages/react/src/react/views/collections/list/context.tsx
@@ -52,6 +52,10 @@ export interface CollectionListContextValue<T extends BaseData = BaseData> {
   search?: string[]
   sortBy?: ([string, 'asc' | 'desc'] | [string])[]
   toolbar?: CollectionToolbarActions
+  banner?: {
+    title?: string
+    description?: string
+  }
 
   // Helper functions
   deleteRows: (rows?: string[]) => void
@@ -67,6 +71,10 @@ export interface CollectionListProviderProps<T extends BaseData = BaseData> {
   search?: string[]
   sortBy?: ([string, 'asc' | 'desc'] | [string])[]
   toolbar?: CollectionToolbarActions
+  banner?: {
+    title?: string
+    description?: string
+  }
 }
 
 /**
@@ -114,13 +122,19 @@ function _CollectionListProvider<T extends BaseData>(props: CollectionListProvid
 
   const components: CollectionListComponents = useMemo(
     () => ({
-      ListBanner: () => <Banner slug={context.slug} />,
+      ListBanner: () => (
+        <Banner
+          slug={context.slug}
+          title={rest.banner?.title}
+          description={rest.banner?.description}
+        />
+      ),
       ListTable: (props) => <CollectionListTable {...props} />,
       ListTableToolbar: (props) => <CollectionListToolbar {...props} />,
       ListTableContainer: (props) => <CollectionListTableContainer {...props} />,
       ListTablePagination: (props) => <CollectionListPagination {...props} />,
     }),
-    [context.slug]
+    [context.slug, rest.banner?.title, rest.banner?.description]
   )
 
   return (
@@ -137,6 +151,7 @@ function _CollectionListProvider<T extends BaseData>(props: CollectionListProvid
         components,
         invalidateList,
         deleteRows,
+        banner: rest.banner,
       }}
     >
       {children}
diff --git a/packages/react/src/react/views/collections/list/default.tsx b/packages/react/src/react/views/collections/list/default.tsx
index aabc1645..d4ad7272 100644
--- a/packages/react/src/react/views/collections/list/default.tsx
+++ b/packages/react/src/react/views/collections/list/default.tsx
@@ -12,7 +12,11 @@ export function DefaultCollectionListPage() {
 
   return (
     <>
-      <Banner slug={context.slug} />
+      <Banner
+        slug={context.slug}
+        title={context.banner?.title}
+        description={context.banner?.description}
+      />
       <CollectionListTableContainer>
         <CollectionListToolbar />
         <CollectionListTable<any> columns={context.columns} onRowClick={undefined} />

From d8c4ace402196685afef033f184172af626af7a8 Mon Sep 17 00:00:00 2001
From: Saenyakorn Siangsanoh <33742791+saenyakorn@users.noreply.github.com>
Date: Fri, 26 Sep 2025 14:22:22 +0700
Subject: [PATCH 2/2] Create friendly-brooms-warn.md

---
 .changeset/friendly-brooms-warn.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/friendly-brooms-warn.md

diff --git a/.changeset/friendly-brooms-warn.md b/.changeset/friendly-brooms-warn.md
new file mode 100644
index 00000000..4bb4c419
--- /dev/null
+++ b/.changeset/friendly-brooms-warn.md
@@ -0,0 +1,6 @@
+---
+"@genseki/react": patch
+---
+
+Support custom banner
+