From cc08094b170c41c903e9111c0f7d214f1bfea135 Mon Sep 17 00:00:00 2001
From: zzj3720 <17165520+zzj3720@users.noreply.github.com>
Date: Fri, 10 Jan 2025 14:01:11 +0000
Subject: [PATCH] feat(editor): improve group title display for checkbox
 columns (#9622)

close: BS-1977
---
 .../src/core/group-by/group-title.ts          | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/blocksuite/affine/data-view/src/core/group-by/group-title.ts b/blocksuite/affine/data-view/src/core/group-by/group-title.ts
index baec82916c..9add00db08 100644
--- a/blocksuite/affine/data-view/src/core/group-by/group-title.ts
+++ b/blocksuite/affine/data-view/src/core/group-by/group-title.ts
@@ -41,6 +41,13 @@ const GroupTitleMobile = (
     readonly: ops.readonly,
   };
 
+  const showColumnName = groupData.property.type$.value === 'checkbox';
+  const columnName = showColumnName
+    ? html`<span class="group-header-title"
+        >${groupData.property.name$.value}</span
+      >`
+    : nothing;
+
   return html`
     <style>
       .group-header-count {
@@ -83,11 +90,17 @@ const GroupTitleMobile = (
         font-size: 16px;
         color: ${unsafeCSSVarV2('icon/primary')};
       }
+
+      .group-header-title {
+        color: ${unsafeCSSVarV2('text/primary')};
+        font-size: var(--data-view-cell-text-size);
+      }
     </style>
     <div
       style="display:flex;align-items:center;gap: 8px;overflow: hidden;height: 22px;"
     >
-      ${icon} ${renderUniLit(data.view, props)} ${GroupHeaderCount(groupData)}
+      ${icon} ${renderUniLit(data.view, props)} ${columnName}
+      ${GroupHeaderCount(groupData)}
     </div>
     ${ops.readonly
       ? nothing
@@ -131,6 +144,13 @@ export const GroupTitle = (
     readonly: ops.readonly,
   };
 
+  const showColumnName = groupData.property.type$.value === 'checkbox';
+  const columnName = showColumnName
+    ? html`<span class="group-header-title"
+        >${groupData.property.name$.value}</span
+      >`
+    : nothing;
+
   return html`
     <style>
       .group-header-count {
@@ -190,11 +210,18 @@ export const GroupTitle = (
         fill: var(--affine-icon-color);
         color: var(--affine-icon-color);
       }
+
+      .group-header-title {
+        color: ${unsafeCSSVarV2('text/primary')};
+        font-size: var(--data-view-cell-text-size);
+        margin-left: 4px;
+      }
     </style>
     <div
       style="display:flex;align-items:center;gap: 8px;overflow: hidden;height: 22px;"
     >
-      ${icon} ${renderUniLit(data.view, props)} ${GroupHeaderCount(groupData)}
+      ${icon} ${renderUniLit(data.view, props)} ${columnName}
+      ${GroupHeaderCount(groupData)}
     </div>
     ${ops.readonly
       ? nothing