From fb2c0ef23724fff55c7e19d4e95833344ec61c53 Mon Sep 17 00:00:00 2001
From: Andrew <159703254+andrewsoonqn@users.noreply.github.com>
Date: Tue, 7 Jul 2026 15:46:33 +0800
Subject: [PATCH] Update search button icons and styles

Revise button labels and styling for search
options to improve UI consistency.
---
 resources/web/dialog/PluginsDialog/index.html |  4 ++--
 .../dialog/PluginsDialog/plugin-search.css    | 22 +++++++++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/resources/web/dialog/PluginsDialog/index.html b/resources/web/dialog/PluginsDialog/index.html
index fa15b792e0..bca59a9a29 100644
--- a/resources/web/dialog/PluginsDialog/index.html
+++ b/resources/web/dialog/PluginsDialog/index.html
@@ -39,9 +39,9 @@
           </svg>
         </button>
         <button id="plugin_search_cc" class="plugin-search-toggle" type="button"
-          aria-pressed="false" title="Match case">Cc</button>
+          aria-pressed="false" title="Match case">Aa</button>
         <button id="plugin_search_w" class="plugin-search-toggle" type="button"
-          aria-pressed="false" title="Match whole word">W</button>
+          aria-pressed="false" title="Match whole word"><span class="plugin-search-underline">ab</span></button>
       </div>
 <!--        <button id="open_terminal" class="ButtonStyleRegular ButtonTypeChoice left-btn">-->
 <!--            Open Terminal-->
diff --git a/resources/web/dialog/PluginsDialog/plugin-search.css b/resources/web/dialog/PluginsDialog/plugin-search.css
index 99d9128aa2..985d37528c 100644
--- a/resources/web/dialog/PluginsDialog/plugin-search.css
+++ b/resources/web/dialog/PluginsDialog/plugin-search.css
@@ -107,6 +107,28 @@
   border-color: var(--main-color-hover);
 }
 
+/* "ab" over a bracket drawn by ::after box draws it */
+.plugin-search-underline {
+  position: relative;
+  display: inline-block;
+  padding-bottom: 2px;
+}
+.plugin-search-underline::after {
+  content: "";
+  position: absolute;
+  /* why: ticks stick out past the outer edges of "a"/"b" on each side. */
+  left: -1px;
+  right: -1px;
+  bottom: 0;
+  /* why: short ticks + bottom rule, tucked near the baseline. */
+  height: 2px;
+  border: 1px solid currentColor;
+  border-top: 0;
+  /* why: soften the two joints where the ticks meet the bottom rule. */
+  border-bottom-left-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+
 /* why: reuse the themed warn tokens so matched-char marks track light and dark automatically.
    note: no padding/margin/border - a highlight must not change text width, else rows reflow. */
 mark.plugin-search-hit {