From 2a4d5ec1ecfe3628e2077a5af95cee108a2de480 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 4 Feb 2026 20:55:55 +0200
Subject: [PATCH] feat(mobile/search): group search options in dropdown

---
 .../src/translations/en/translation.json      |  1 +
 .../src/widgets/react/ResponseContainer.tsx   | 12 +++++++
 .../widgets/ribbon/SearchDefinitionTab.tsx    | 36 +++++++++++++------
 3 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 apps/client/src/widgets/react/ResponseContainer.tsx

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 32f86b3694..7ffe41d164 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -908,6 +908,7 @@
     "debug": "debug",
     "debug_description": "Debug will print extra debugging information into the console to aid in debugging complex queries",
     "action": "action",
+    "option": "option",
     "search_button": "Search",
     "search_execute": "Search & Execute actions",
     "save_to_note": "Save to note",
diff --git a/apps/client/src/widgets/react/ResponseContainer.tsx b/apps/client/src/widgets/react/ResponseContainer.tsx
new file mode 100644
index 0000000000..6c077a5c06
--- /dev/null
+++ b/apps/client/src/widgets/react/ResponseContainer.tsx
@@ -0,0 +1,12 @@
+import { ComponentChildren } from "preact";
+
+import { isMobile } from "../../services/utils";
+
+interface ResponsiveContainerProps {
+    mobile?: ComponentChildren;
+    desktop?: ComponentChildren;
+}
+
+export default function ResponsiveContainer({ mobile, desktop }: ResponsiveContainerProps) {
+    return (isMobile() ? mobile : desktop);
+}
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
index 9d182a138d..c3a54566a7 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
@@ -12,7 +12,7 @@ import { t } from "../../services/i18n";
 import server from "../../services/server";
 import toast from "../../services/toast";
 import tree from "../../services/tree";
-import { getErrorMessage } from "../../services/utils";
+import { getErrorMessage, isMobile } from "../../services/utils";
 import ws from "../../services/ws";
 import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
 import Button from "../react/Button";
@@ -21,6 +21,7 @@ import { FormListHeader, FormListItem } from "../react/FormList";
 import { useTriliumEvent } from "../react/hooks";
 import Icon from "../react/Icon";
 import { ParentComponent } from "../react/react_utils";
+import ResponsiveContainer from "../react/ResponseContainer";
 import { TabContext } from "./ribbon-interface";
 import { SEARCH_OPTIONS, SearchOption } from "./SearchDefinitionOptions";
 
@@ -84,15 +85,30 @@ export default function SearchDefinitionTab({ note, ntxId, hidden }: Pick<TabCon
                             <tr>
                                 <td className="title-column">{t("search_definition.add_search_option")}</td>
                                 <td colSpan={2} className="add-search-option">
-                                    {searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }) => (
-                                        <Button
-                                            size="small"
-                                            icon={icon}
-                                            text={label}
-                                            title={tooltip}
-                                            onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
-                                        />
-                                    ))}
+                                    <ResponsiveContainer
+                                        desktop={searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }, index) => (
+                                            <Button
+                                                key={index} size="small" icon={icon} text={label} title={tooltip}
+                                                onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
+                                            />
+                                        ))}
+                                        mobile={
+                                            <Dropdown
+                                                buttonClassName="action-add-toggle btn btn-sm"
+                                                text={<><Icon icon="bx bx-plus" />{" "}{t("search_definition.option")}</>}
+                                                noSelectButtonStyle
+                                            >
+                                                {searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }, index) => (
+                                                    <FormListItem
+                                                        key={index} icon={icon}
+                                                        description={tooltip}
+                                                        onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
+                                                    >{label}</FormListItem>
+                                                ))}
+                                            </Dropdown>
+                                        }
+                                    />
+
 
                                     <AddBulkActionButton note={note} />
                                 </td>