feat(views/table): relocate new row/column buttons

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"
   }
 }

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();
+}

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();