From 02336f4e531c70ef22a43574bef16b137b7b17b2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 13 Apr 2026 18:02:25 +0300
Subject: [PATCH] feat(options/other): improve predefined search engines

---
 .../src/translations/en/translation.json      |  2 +-
 .../options/components/OptionsRow.css         | 20 ++++++++++
 .../widgets/type_widgets/options/other.tsx    | 38 +++++++++----------
 3 files changed, 40 insertions(+), 20 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index d90a396412..5e419f282f 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1361,7 +1361,7 @@
   "search_engine": {
     "title": "Search Engine",
     "custom_search_engine_info": "Used when searching the web for selected text. If not configured, DuckDuckGo will be used.",
-    "predefined_templates_label": "Predefined templates",
+    "predefined_templates_label": "Presets",
     "bing": "Bing",
     "baidu": "Baidu",
     "duckduckgo": "DuckDuckGo",
diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
index 2eed825448..1886fa3571 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
@@ -81,3 +81,23 @@ button.option-row-link {
 button.option-row-link:last-child {
     border-bottom: none;
 }
+
+.search-engine-templates {
+    --badge-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-wrap: wrap;
+}
+
+.search-engine-templates .ext-badge {
+    --color: var(--input-background-color);
+    color: var(--main-text-color);
+    font-size: 0.85em;
+}
+
+.search-engine-templates .ext-badge.selected {
+    --color: var(--accented-background-color);
+    outline: 2px solid var(--accent-color);
+    outline-offset: -2px;
+}
diff --git a/apps/client/src/widgets/type_widgets/options/other.tsx b/apps/client/src/widgets/type_widgets/options/other.tsx
index 5ee5fad131..4c1458a0c8 100644
--- a/apps/client/src/widgets/type_widgets/options/other.tsx
+++ b/apps/client/src/widgets/type_widgets/options/other.tsx
@@ -6,8 +6,8 @@ import search from "../../../services/search";
 import server from "../../../services/server";
 import toast from "../../../services/toast";
 import { isElectron } from "../../../services/utils";
+import { Badge } from "../../react/Badge";
 import Button from "../../react/Button";
-import FormSelect from "../../react/FormSelect";
 import FormText from "../../react/FormText";
 import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
@@ -64,30 +64,30 @@ function SearchEngineSettings() {
 
     const searchEngines = useMemo(() => {
         return [
-            { url: "https://www.bing.com/search?q={keyword}", name: t("search_engine.bing") },
-            { url: "https://www.baidu.com/s?wd={keyword}", name: t("search_engine.baidu") },
             { url: "https://duckduckgo.com/?q={keyword}", name: t("search_engine.duckduckgo") },
-            { url: "https://www.google.com/search?q={keyword}", name: t("search_engine.google") }
+            { url: "https://www.bing.com/search?q={keyword}", name: t("search_engine.bing"), icon: "bx bxl-bing" },
+            { url: "https://www.baidu.com/s?wd={keyword}", name: t("search_engine.baidu"), icon: "bx bxl-baidu" },
+            { url: "https://www.google.com/search?q={keyword}", name: t("search_engine.google"), icon: "bx bxl-google" }
         ];
     }, []);
 
     return (
         <OptionsSection title={t("search_engine.title")} description={t("search_engine.custom_search_engine_info")}>
-            <OptionsRow name="predefined-search-engine" label={t("search_engine.predefined_templates_label")}>
-                <FormSelect
-                    values={searchEngines}
-                    currentValue={customSearchEngineUrl}
-                    keyProperty="url" titleProperty="name"
-                    onChange={newValue => {
-                        const searchEngine = searchEngines.find(e => e.url === newValue);
-                        if (!searchEngine) {
-                            return;
-                        }
-
-                        setCustomSearchEngineName(searchEngine.name);
-                        setCustomSearchEngineUrl(searchEngine.url);
-                    }}
-                />
+            <OptionsRow name="predefined-templates" label={t("search_engine.predefined_templates_label")}>
+                <div className="search-engine-templates">
+                    {searchEngines.map(engine => (
+                        <Badge
+                            key={engine.url}
+                            icon={engine.icon}
+                            text={engine.name}
+                            className={customSearchEngineUrl === engine.url ? "selected" : ""}
+                            onClick={() => {
+                                setCustomSearchEngineName(engine.name);
+                                setCustomSearchEngineUrl(engine.url);
+                            }}
+                        />
+                    ))}
+                </div>
             </OptionsRow>
 
             <OptionsRow name="custom-name" label={t("search_engine.custom_name_label")}>