feat: userActions drives toolbar visibility + AddRecord button with position support

Copilot · hotlong · Copilot · commit eb98fa88adce · 2026-02-23T12:29:26.000Z
- Gate addRecord button with userActions.addRecordForm !== false
- Support addRecord.position (top/bottom) for button placement
- Use i18n key list.addRecord for button label
- Add addRecord i18n key to all 10 locale files
- Add 3 new unit tests for addRecordForm and position

Co-authored-by: hotlong &lt;50353452+hotlong@users.noreply.github.com&gt;
diff --git a/packages/i18n/src/locales/ar.ts b/packages/i18n/src/locales/ar.ts
@@ -101,6 +101,7 @@ const ar = {
   list: {
     recordCount: '{{count}} سجلات',
     recordCountOne: '{{count}} سجل',
+    addRecord: 'إضافة سجل',
   },
   kanban: {
     addCard: 'إضافة بطاقة',
diff --git a/packages/i18n/src/locales/de.ts b/packages/i18n/src/locales/de.ts
@@ -100,6 +100,7 @@ const de = {
   list: {
     recordCount: '{{count}} Datensätze',
     recordCountOne: '{{count}} Datensatz',
+    addRecord: 'Datensatz hinzufügen',
   },
   kanban: {
     addCard: 'Karte hinzufügen',
diff --git a/packages/i18n/src/locales/en.ts b/packages/i18n/src/locales/en.ts
@@ -100,6 +100,7 @@ const en = {
   list: {
     recordCount: '{{count}} records',
     recordCountOne: '{{count}} record',
+    addRecord: 'Add record',
   },
   kanban: {
     addCard: 'Add card',
diff --git a/packages/i18n/src/locales/es.ts b/packages/i18n/src/locales/es.ts
@@ -100,6 +100,7 @@ const es = {
   list: {
     recordCount: '{{count}} registros',
     recordCountOne: '{{count}} registro',
+    addRecord: 'Agregar registro',
   },
   kanban: {
     addCard: 'Añadir tarjeta',
diff --git a/packages/i18n/src/locales/fr.ts b/packages/i18n/src/locales/fr.ts
@@ -100,6 +100,7 @@ const fr = {
   list: {
     recordCount: '{{count}} enregistrements',
     recordCountOne: '{{count}} enregistrement',
+    addRecord: 'Ajouter un enregistrement',
   },
   kanban: {
     addCard: 'Ajouter une carte',
diff --git a/packages/i18n/src/locales/ja.ts b/packages/i18n/src/locales/ja.ts
@@ -100,6 +100,7 @@ const ja = {
   list: {
     recordCount: '{{count}} 件のレコード',
     recordCountOne: '{{count}} 件のレコード',
+    addRecord: 'レコードを追加',
   },
   kanban: {
     addCard: 'カードを追加',
diff --git a/packages/i18n/src/locales/ko.ts b/packages/i18n/src/locales/ko.ts
@@ -100,6 +100,7 @@ const ko = {
   list: {
     recordCount: '{{count}}개 레코드',
     recordCountOne: '{{count}}개 레코드',
+    addRecord: '레코드 추가',
   },
   kanban: {
     addCard: '카드 추가',
diff --git a/packages/i18n/src/locales/pt.ts b/packages/i18n/src/locales/pt.ts
@@ -100,6 +100,7 @@ const pt = {
   list: {
     recordCount: '{{count}} registros',
     recordCountOne: '{{count}} registro',
+    addRecord: 'Adicionar registro',
   },
   kanban: {
     addCard: 'Adicionar cartão',
diff --git a/packages/i18n/src/locales/ru.ts b/packages/i18n/src/locales/ru.ts
@@ -100,6 +100,7 @@ const ru = {
   list: {
     recordCount: '{{count}} записей',
     recordCountOne: '{{count}} запись',
+    addRecord: 'Добавить запись',
   },
   kanban: {
     addCard: 'Добавить карточку',
diff --git a/packages/i18n/src/locales/zh.ts b/packages/i18n/src/locales/zh.ts
@@ -100,6 +100,7 @@ const zh = {
   list: {
     recordCount: '{{count}} 条记录',
     recordCountOne: '{{count}} 条记录',
+    addRecord: '添加记录',
   },
   kanban: {
     addCard: '添加卡片',
diff --git a/packages/plugin-list/src/ListView.tsx b/packages/plugin-list/src/ListView.tsx
@@ -202,6 +202,7 @@ const LIST_DEFAULT_TRANSLATIONS: Record<string, string> = {
   'list.pullToRefresh': 'Pull to refresh',
   'list.refreshing': 'Refreshing…',
   'list.dataLimitReached': 'Showing first {{limit}} records. More data may be available.',
+  'list.addRecord': 'Add record',
 };
 
 /**
@@ -1324,8 +1325,8 @@ export const ListView: React.FC<ListViewProps> = ({
 
         {/* Right: Add Record + Search */}
         <div className="flex items-center gap-1">
-          {/* Add Record */}
-          {schema.addRecord?.enabled && (
+          {/* Add Record (top position) */}
+          {schema.addRecord?.enabled && schema.userActions?.addRecordForm !== false && schema.addRecord?.position !== 'bottom' && (
             <Button
               variant="ghost"
               size="sm"
@@ -1334,7 +1335,7 @@ export const ListView: React.FC<ListViewProps> = ({
               onClick={() => props.onAddRecord?.()}
             >
               <Plus className="h-3.5 w-3.5 mr-1.5" />
-              <span className="hidden sm:inline">Add record</span>
+              <span className="hidden sm:inline">{t('list.addRecord')}</span>
             </Button>
           )}
 
@@ -1453,6 +1454,22 @@ export const ListView: React.FC<ListViewProps> = ({
         )}
       </div>
 
+      {/* Add Record (bottom position) */}
+      {schema.addRecord?.enabled && schema.userActions?.addRecordForm !== false && schema.addRecord?.position === 'bottom' && (
+        <div className="border-t px-2 sm:px-4 py-1 bg-background shrink-0">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-7 px-2 text-muted-foreground hover:text-primary text-xs"
+            data-testid="add-record-button"
+            onClick={() => props.onAddRecord?.()}
+          >
+            <Plus className="h-3.5 w-3.5 mr-1.5" />
+            <span className="hidden sm:inline">{t('list.addRecord')}</span>
+          </Button>
+        </div>
+      )}
+
       {/* Bulk Actions Bar — skip for grid view since ObjectGrid renders its own BulkActionBar */}
       {schema.bulkActions && schema.bulkActions.length > 0 && selectedRows.length > 0 && currentView !== 'grid' && (
         <div
diff --git a/packages/plugin-list/src/__tests__/ListView.test.tsx b/packages/plugin-list/src/__tests__/ListView.test.tsx
@@ -1105,6 +1105,52 @@ describe('ListView', () => {
       renderWithProvider(<ListView schema={schema} />);
       expect(screen.queryByTestId('add-record-button')).not.toBeInTheDocument();
     });
+
+    it('should hide add record button when userActions.addRecordForm is false', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        addRecord: { enabled: true },
+        userActions: { addRecordForm: false },
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      expect(screen.queryByTestId('add-record-button')).not.toBeInTheDocument();
+    });
+
+    it('should render add record button at bottom when position is bottom', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        addRecord: { enabled: true, position: 'bottom' },
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      const btn = screen.getByTestId('add-record-button');
+      expect(btn).toBeInTheDocument();
+      // The bottom button is wrapped in a border-t div outside the toolbar
+      expect(btn.closest('div.border-t')).toBeTruthy();
+    });
+
+    it('should render add record button in toolbar when position is top', () => {
+      const schema: ListViewSchema = {
+        type: 'list-view',
+        objectName: 'contacts',
+        viewType: 'grid',
+        fields: ['name', 'email'],
+        addRecord: { enabled: true, position: 'top' },
+      };
+
+      renderWithProvider(<ListView schema={schema} />);
+      const btn = screen.getByTestId('add-record-button');
+      expect(btn).toBeInTheDocument();
+      // The top button is inside the toolbar border-b div
+      expect(btn.closest('div.border-b')).toBeTruthy();
+    });
   });
 
   // ============================
