From fddd73fdb1a244e65879999e2f5dc068907320ec Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 31 Jan 2026 12:59:09 +0200
Subject: [PATCH] feat(table): display action buttons on mobile

---
 .../src/widgets/collections/table/index.tsx   |  7 +++----
 apps/client/src/widgets/react/Button.tsx      | 19 ++++++++++++++++---
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/apps/client/src/widgets/collections/table/index.tsx b/apps/client/src/widgets/collections/table/index.tsx
index 7028bd439..87745b3e2 100644
--- a/apps/client/src/widgets/collections/table/index.tsx
+++ b/apps/client/src/widgets/collections/table/index.tsx
@@ -3,12 +3,11 @@ import "./index.css";
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { DataTreeModule, EditModule, FormatModule, FrozenColumnsModule, InteractionModule, MoveColumnsModule, MoveRowsModule, Options, PersistenceModule, ResizeColumnsModule, RowComponent,SortModule, Tabulator as VanillaTabulator} from 'tabulator-tables';
 
-import FNote from "../../../entities/fnote";
 import { t } from "../../../services/i18n";
 import SpacedUpdate from "../../../services/spaced_update";
 import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
 import CollectionProperties from "../../note_bars/CollectionProperties";
-import Button from "../../react/Button";
+import { ButtonOrActionButton } from "../../react/Button";
 import { useLegacyWidget } from "../../react/hooks";
 import { ParentComponent } from "../../react/react_utils";
 import { ViewModeProps } from "../interface";
@@ -53,8 +52,8 @@ export default function TableView({ note, noteIds, notePath, viewConfig, saveCon
                 note={note}
                 rightChildren={note.type !== "search" &&
                     <>
-                        <Button triggerCommand="addNewRow" icon="bx bx-plus" text={t("table_view.new-row")} />
-                        <Button triggerCommand="addNewTableColumn" icon="bx bx-carousel" text={t("table_view.new-column")} />
+                        <ButtonOrActionButton triggerCommand="addNewRow" icon="bx bx-plus" text={t("table_view.new-row")} />
+                        <ButtonOrActionButton triggerCommand="addNewTableColumn" icon="bx bx-carousel" text={t("table_view.new-column")} />
                     </>
                 }
             />
diff --git a/apps/client/src/widgets/react/Button.tsx b/apps/client/src/widgets/react/Button.tsx
index 6089f1709..1fe7727b5 100644
--- a/apps/client/src/widgets/react/Button.tsx
+++ b/apps/client/src/widgets/react/Button.tsx
@@ -1,8 +1,11 @@
 import type { ComponentChildren, RefObject } from "preact";
 import type { CSSProperties } from "preact/compat";
-import { useMemo } from "preact/hooks";
 import { memo } from "preact/compat";
+import { useMemo } from "preact/hooks";
+
 import { CommandNames } from "../../components/app_context";
+import { isDesktop } from "../../services/utils";
+import ActionButton from "./ActionButton";
 import Icon from "./Icon";
 
 export interface ButtonProps {
@@ -78,7 +81,7 @@ export function ButtonGroup({ children }: { children: ComponentChildren }) {
         <div className="btn-group" role="group">
             {children}
         </div>
-    )
+    );
 }
 
 export function SplitButton({ text, icon, children, ...restProps }: {
@@ -103,7 +106,17 @@ export function SplitButton({ text, icon, children, ...restProps }: {
                 {children}
             </ul>
         </ButtonGroup>
-    )
+    );
+}
+
+export function ButtonOrActionButton(props: {
+    text: string;
+    icon: string;
+} & Pick<ButtonProps, "onClick" | "triggerCommand">) {
+    if (isDesktop()) {
+        return <Button {...props} />;
+    }
+    return <ActionButton {...props} />;
 }
 
 export default Button;