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 {t("search_definition.add_search_option")} - {searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }) => ( -