From 01b2257063a74b46602dddb75fd69c0848418b8a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 4 Jul 2025 19:23:26 +0300
Subject: [PATCH] feat(views/table): relocate new row/column buttons

---
 apps/client/src/translations/en/translation.json |  4 ++++
 .../widgets/view_widgets/table_view/footer.ts    | 13 +++++++++++++
 .../src/widgets/view_widgets/table_view/index.ts | 16 +++++++++++-----
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 apps/client/src/widgets/view_widgets/table_view/footer.ts

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index fadf09a4a..b2d2f0a27 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1934,5 +1934,9 @@
     "title": "Features",
     "emoji_completion_enabled": "Enable Emoji auto-completion",
     "note_completion_enabled": "Enable note auto-completion"
+  },
+  "table_view": {
+    "new-row": "New row",
+    "new-column": "New column"
   }
 }
diff --git a/apps/client/src/widgets/view_widgets/table_view/footer.ts b/apps/client/src/widgets/view_widgets/table_view/footer.ts
new file mode 100644
index 000000000..2d168b8cd
--- /dev/null
+++ b/apps/client/src/widgets/view_widgets/table_view/footer.ts
@@ -0,0 +1,13 @@
+import { t } from "../../../services/i18n.js";
+
+export default function buildFooter() {
+    return /*html*/`\
+        <button class="btn btn-sm" style="padding: 0px 10px 0px 10px;" data-trigger-command="addNewRow">
+            <span class="bx bx-plus"></span> ${t("table_view.new-row")}
+        </button>
+
+        <button class="btn btn-sm" style="padding: 0px 10px 0px 10px;" data-trigger-command="addNoteListItem">
+            <span class="bx bx-columns"></span> ${t("table_view.new-column")}
+        </button>
+    `.trimStart();
+}
diff --git a/apps/client/src/widgets/view_widgets/table_view/index.ts b/apps/client/src/widgets/view_widgets/table_view/index.ts
index a3b6d531b..b26c2bc0b 100644
--- a/apps/client/src/widgets/view_widgets/table_view/index.ts
+++ b/apps/client/src/widgets/view_widgets/table_view/index.ts
@@ -12,6 +12,7 @@ import {Tabulator, SortModule, FormatModule, InteractionModule, EditModule, Resi
 import "tabulator-tables/dist/css/tabulator_bootstrap5.min.css";
 import { applyHeaderMenu } from "./header-menu.js";
 import { canReorderRows, configureReorderingRows } from "./dragging.js";
+import buildFooter from "./footer.js";
 
 const TPL = /*html*/`
 <div class="table-view">
@@ -43,12 +44,16 @@ const TPL = /*html*/`
         background: transparent;
         outline: none !important;
     }
-    </style>
 
-    <div class="header">
-        <button data-trigger-command="addNoteListItem">Add new column</button>
-        <button data-trigger-command="addNewRow">Add new row</button>
-    </div>
+    .tabulator .tabulator-footer {
+        background-color: unset;
+    }
+
+    .tabulator .tabulator-footer .tabulator-footer-contents {
+        justify-content: left;
+        gap: 0.5em;
+    }
+    </style>
 
     <div class="table-view-container"></div>
 </div>
@@ -117,6 +122,7 @@ export default class TableView extends ViewMode<StateInfo> {
             persistence: true,
             movableColumns: true,
             movableRows,
+            footerElement: buildFooter(),
             persistenceWriterFunc: (_id, type: string, data: object) => {
                 this.persistentData[type] = data;
                 this.spacedUpdate.scheduleUpdate();