feat: implement ConfigRow layout optimization (#4) and toolbar summary chip (#7)

- ConfigRow: add label maxWidth (45%), text truncation with title tooltip for both label and value
- Toolbar section: add summary chip showing "X of Y enabled" at top of expanded section
- Add toolbarEnabledCount i18n key to all 10 locales
- Update view-config-schema tests for new _toolbarSummary field

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/src/__tests__/view-config-schema.test.tsx

@@ -394,7 +394,7 @@ describe('buildViewConfigSchema', () => {
             const section = schema.sections.find((s: any) => s.key === 'toolbar')!;
             const fieldKeys = section.fields.map((f: any) => f.key);
             expect(fieldKeys).toEqual([
-                'showSearch', 'showSort', 'showFilters', 'showHideFields', 'showGroup', 'showColor', 'showDensity',
+                '_toolbarSummary', 'showSearch', 'showSort', 'showFilters', 'showHideFields', 'showGroup', 'showColor', 'showDensity',
             ]);
         });
 

apps/console/src/utils/view-config-schema.tsx

@@ -340,13 +340,33 @@ function buildGeneralSection(
 function buildToolbarSection(
     t: ViewSchemaFactoryOptions['t'],
 ): ConfigPanelSchema['sections'][number] {
+    /** Keys of all toolbar toggles (used for enabled-count summary) */
+    const toolbarKeys = ['showSearch', 'showSort', 'showFilters', 'showHideFields', 'showGroup', 'showColor', 'showDensity'];
+
     return {
         key: 'toolbar',
         title: t('console.objectView.toolbar'),
         hint: t('console.objectView.toolbarHint'),
         collapsible: true,
         defaultCollapsed: true,
         fields: [
+            // Summary chip — "X of Y enabled" at-a-glance overview at the top of expanded section
+            {
+                key: '_toolbarSummary',
+                label: t('console.objectView.toolbar'),
+                type: 'custom' as const,
+                render: (_value: any, _onChange: any, draft: Record<string, any>) => {
+                    const total = toolbarKeys.length;
+                    const count = toolbarKeys.filter(k => draft[k] !== false).length;
+                    return (
+                        <div className="flex items-center gap-1.5 py-1" data-testid="toolbar-summary-chip">
+                            <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[10px] font-medium text-muted-foreground">
+                                {t('console.objectView.toolbarEnabledCount', { count, total })}
+                            </span>
+                        </div>
+                    );
+                },
+            },
             // Toolbar toggles — ordered per spec: showSearch, showSort, showFilters, showHideFields, showGroup, showColor, showDensity
             buildSwitchField('showSearch', t('console.objectView.enableSearch'), 'toggle-showSearch', true),       // spec: NamedListView.showSearch
             buildSwitchField('showSort', t('console.objectView.enableSort'), 'toggle-showSort', true),             // spec: NamedListView.showSort

packages/components/src/custom/config-row.tsx

@@ -39,9 +39,9 @@ function ConfigRow({ label, value, onClick, children, className }: ConfigRowProp
       onClick={onClick}
       type={onClick ? 'button' : undefined}
     >
-      <span className="text-xs text-muted-foreground shrink-0">{label}</span>
+      <span className="text-xs text-muted-foreground shrink-0 max-w-[45%] truncate" title={label}>{label}</span>
       {children || (
-        <span className="text-xs text-foreground truncate ml-4 text-right">{value}</span>
+        <span className="text-xs text-foreground truncate ml-4 text-right max-w-[55%]" title={value}>{value}</span>
       )}
     </Wrapper>
   )

packages/i18n/src/locales/ar.ts

@@ -368,6 +368,7 @@ const ar = {
       generalHint: 'عنوان العرض والوصف والنوع',
       toolbar: 'شريط الأدوات',
       toolbarHint: 'البحث والتصفية والفرز والتجميع ومفاتيح الكثافة',
+      toolbarEnabledCount: '{{count}} of {{total}} enabled',
       navigationSection: 'التنقل',
       navigationHint: 'سلوك النقر على الصف وإعدادات العرض التفصيلي',
       records: 'السجلات',

packages/i18n/src/locales/de.ts

@@ -372,6 +372,7 @@ const de = {
       generalHint: 'Ansichtstitel, Beschreibung und Typ',
       toolbar: 'Symbolleiste',
       toolbarHint: 'Suche, Filter, Sortierung, Gruppierung und Dichteumschaltung',
+      toolbarEnabledCount: '{{count}} of {{total}} enabled',
       navigationSection: 'Navigation',
       navigationHint: 'Zeilenklickverhalten und Detailansichtseinstellungen',
       records: 'Datensätze',

packages/i18n/src/locales/en.ts

@@ -372,6 +372,7 @@ const en = {
       generalHint: 'View title, description, and type',
       toolbar: 'Toolbar',
       toolbarHint: 'Search, filter, sort, group, and density toggles',
+      toolbarEnabledCount: '{{count}} of {{total}} enabled',
       navigationSection: 'Navigation',
       navigationHint: 'Row click behavior and detail view settings',
       records: 'Records',

packages/i18n/src/locales/es.ts

@@ -367,6 +367,7 @@ const es = {
       generalHint: 'Título, descripción y tipo de la vista',
       toolbar: 'Barra de herramientas',
       toolbarHint: 'Búsqueda, filtro, orden, agrupación y alternancia de densidad',
+      toolbarEnabledCount: '{{count}} of {{total}} enabled',
       navigationSection: 'Navegación',
       navigationHint: 'Comportamiento al hacer clic en la fila y configuración de la vista detallada',
       records: 'Registros',

packages/i18n/src/locales/fr.ts

@@ -372,6 +372,7 @@ const fr = {
       generalHint: 'Titre, description et type de la vue',
       toolbar: 'Barre d\'outils',
       toolbarHint: 'Recherche, filtre, tri, regroupement et bascule de densité',
+      toolbarEnabledCount: '{{count}} of {{total}} enabled',
       navigationSection: 'Navigation',
       navigationHint: 'Comportement au clic sur la ligne et paramètres de la vue détaillée',
       records: 'Enregistrements',

packages/i18n/src/locales/ja.ts

@@ -367,6 +367,7 @@ const ja = {
       generalHint: 'ビューのタイトル、説明、タイプ',
       toolbar: 'ツールバー',
       toolbarHint: '検索、フィルター、ソート、グループ、密度の切り替え',
+      toolbarEnabledCount: '{{count}} of {{total}} enabled',
       navigationSection: 'ナビゲーション',
       navigationHint: '行クリック時の動作と詳細ビューの設定',
       records: 'レコード',

packages/i18n/src/locales/ko.ts

@@ -367,6 +367,7 @@ const ko = {
       generalHint: '보기 제목, 설명 및 유형',
       toolbar: '도구 모음',
       toolbarHint: '검색, 필터, 정렬, 그룹화 및 밀도 전환',
+      toolbarEnabledCount: '{{count}} of {{total}} enabled',
       navigationSection: '탐색',
       navigationHint: '행 클릭 동작 및 상세 보기 설정',
       records: '레코드',