feat: wire up collapsible+pageSize in DetailView, prominent count Badge, stronger row hover

- DetailView passes collapsible and pageSize={5} to all RelatedList instances
- Record count uses Badge component for prominent display (e.g., Order [7])
- DataTable row hover increased from hover:bg-muted/30 to hover:bg-muted/50
- Remove unused ChevronUp import and recordCountText variable
- Update tests for new Badge-based record count display

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

Author: Copilot

packages/components/src/renderers/complex/data-table.tsx

@@ -858,7 +858,7 @@ const DataTableRenderer = ({ schema }: { schema: DataTableSchema }) => {
                       key={rowId} 
                       data-state={isSelected ? 'selected' : undefined}
                       className={cn(
-                        "bg-background border-b border-border hover:bg-muted/30 group/row",
+                        "bg-background border-b border-border hover:bg-muted/50 group/row",
                         schema.onRowClick && "cursor-pointer",
                         rowHasChanges && "bg-amber-50 dark:bg-amber-950/20",
                         rowClassName && rowClassName(row, rowIndex)

packages/plugin-detail/src/DetailView.tsx

@@ -694,6 +694,8 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     columns={related.columns as any}
                     dataSource={dataSource}
                     objectName={related.api}
+                    collapsible
+                    pageSize={5}
                   />
                 ))}
               </div>
@@ -777,6 +779,8 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   columns={related.columns as any}
                   dataSource={dataSource}
                   objectName={related.api}
+                  collapsible
+                  pageSize={5}
                 />
               ))}
             </div>

packages/plugin-detail/src/RelatedList.tsx

@@ -12,6 +12,7 @@ import {
   CardHeader,
   CardTitle,
   CardContent,
+  Badge,
   Button,
   Input,
 } from '@object-ui/components';
@@ -25,7 +26,6 @@ import {
   ChevronRight,
   ArrowUpDown,
   ChevronDown,
-  ChevronUp,
 } from 'lucide-react';
 import type { DataSource, FieldMetadata } from '@object-ui/types';
 import { getCellRenderer } from '@object-ui/fields';
@@ -254,10 +254,6 @@ export const RelatedList: React.FC<RelatedListProps> = ({
     }
   }, [type, paginatedData, effectiveColumns, schema, effectivePageSize]);
 
-  const recordCountText = relatedData.length === 1
-    ? t('detail.relatedRecordOne', { count: relatedData.length })
-    : t('detail.relatedRecords', { count: relatedData.length });
-
   const hasRowActions = !!onRowEdit || !!onRowDelete;
 
   const headerClassName = collapsible ? 'cursor-pointer select-none' : undefined;
@@ -274,9 +270,9 @@ export const RelatedList: React.FC<RelatedListProps> = ({
                 : (<ChevronDown className="h-4 w-4 text-muted-foreground" />)
             )}
             <span>{title}</span>
-            <span className="text-sm font-normal text-muted-foreground">
-              {recordCountText}
-            </span>
+            <Badge variant="secondary" className="text-xs font-normal">
+              {relatedData.length}
+            </Badge>
           </div>
           <div className="flex items-center gap-1">
             {onNew && (

packages/plugin-detail/src/__tests__/RelatedList.test.tsx

@@ -16,23 +16,23 @@ describe('RelatedList', () => {
     expect(screen.getByText('Contacts')).toBeInTheDocument();
   });
 
-  it('should show record count for empty list', () => {
+  it('should show record count badge for empty list', () => {
     render(<RelatedList title="Contacts" type="table" data={[]} />);
-    expect(screen.getByText('0 records')).toBeInTheDocument();
+    expect(screen.getByText('0')).toBeInTheDocument();
   });
 
-  it('should show singular record count for one item', () => {
+  it('should show record count badge for one item', () => {
     render(<RelatedList title="Contacts" type="table" data={[{ id: 1, name: 'Alice' }]} />);
-    expect(screen.getByText('1 record')).toBeInTheDocument();
+    expect(screen.getByText('1')).toBeInTheDocument();
   });
 
-  it('should show plural record count for multiple items', () => {
+  it('should show record count badge for multiple items', () => {
     const data = [
       { id: 1, name: 'Alice' },
       { id: 2, name: 'Bob' },
     ];
     render(<RelatedList title="Orders" type="table" data={data} />);
-    expect(screen.getByText('2 records')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
   });
 
   it('should show "No related records found" for empty data', () => {