From b6f46a07944dc61a4d6c8c9cc2cf02f6c2f6e27a Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Mon, 27 Oct 2025 16:17:25 +0100
Subject: [PATCH 1/2] SearchInput fixes

- Translate Clear button label
- Fix clear button not showing correctly on bold theme
- Add `Esc` keyboard shortcut
- Remove redundant keyboard shortcut logic in SearchInput in favour of the generic `KeyboardShortcut`
---
 .changeset/cold-dancers-buy.md                |  5 ++
 .../src/components/Search/SearchInput.tsx     | 50 +++----------------
 packages/gitbook/src/intl/translations/de.ts  |  1 +
 packages/gitbook/src/intl/translations/en.ts  |  1 +
 packages/gitbook/src/intl/translations/es.ts  |  1 +
 packages/gitbook/src/intl/translations/fr.ts  |  1 +
 packages/gitbook/src/intl/translations/it.ts  |  1 +
 packages/gitbook/src/intl/translations/ja.ts  |  1 +
 packages/gitbook/src/intl/translations/nl.ts  |  1 +
 packages/gitbook/src/intl/translations/no.ts  |  1 +
 .../gitbook/src/intl/translations/pt-br.ts    |  1 +
 packages/gitbook/src/intl/translations/ru.ts  |  1 +
 packages/gitbook/src/intl/translations/zh.ts  |  1 +
 13 files changed, 24 insertions(+), 42 deletions(-)
 create mode 100644 .changeset/cold-dancers-buy.md

diff --git a/.changeset/cold-dancers-buy.md b/.changeset/cold-dancers-buy.md
new file mode 100644
index 0000000000..04e8cb5e1e
--- /dev/null
+++ b/.changeset/cold-dancers-buy.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+SearchInput fixes — Translate Clear button, Bold theme color, "Esc" keyboard shortcut
diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index 88fa7311be..f84f683784 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -1,11 +1,12 @@
 'use client';
 import React from 'react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
 import { tcls } from '@/lib/tailwind';
 import { Icon } from '@gitbook/icons';
 import { Button, variantClasses } from '../primitives';
+import { KeyboardShortcut } from '../primitives/KeyboardShortcut';
 import { useClassnames } from '../primitives/StyleProvider';
 
 interface SearchInputProps {
@@ -79,11 +80,11 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     {value && isOpen ? (
                         <Button
                             variant="blank"
-                            label="Clear"
+                            label={tString(language, 'clear')}
                             size="medium"
                             iconOnly
                             icon="circle-xmark"
-                            className="-ml-1.5 -mr-1 animate-scale-in px-1.5"
+                            className="-ml-1.5 -mr-1 animate-scale-in px-1.5 theme-bold:text-header-link theme-bold:hover:bg-header-link/3"
                             onClick={() => {
                                 onChange('');
                                 inputRef.current?.focus();
@@ -120,47 +121,12 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                         // Forward
                         ref={inputRef}
                     />
-                    {!isOpen ? <Shortcut /> : null}
+                    <KeyboardShortcut
+                        keys={isOpen ? ['esc'] : ['mod', 'k']}
+                        className="theme-bold:border-header-link/5 theme-bold:bg-header-background theme-bold:text-header-link"
+                    />
                 </div>
             </div>
         );
     }
 );
-
-function getOperatingSystem() {
-    const platform = navigator.platform.toLowerCase();
-
-    if (platform.includes('mac')) return 'mac';
-    if (platform.includes('win')) return 'win';
-
-    return 'win';
-}
-
-function Shortcut() {
-    const [operatingSystem, setOperatingSystem] = useState<string | null>(null);
-
-    useEffect(() => {
-        setOperatingSystem(getOperatingSystem());
-    }, []);
-
-    return (
-        <div
-            aria-busy={operatingSystem === null ? 'true' : undefined}
-            className={tcls(
-                `shortcut -mr-1 relative z-10 hidden justify-end gap-0.5 whitespace-nowrap text-xs [font-feature-settings:"calt","case"] after:absolute after:right-full after:z-20 after:h-full after:w-8 after:bg-linear-to-r after:from-transparent after:to-tint-base theme-bold:after:to-transparent after:content-[''] contrast-more:text-tint-strong md:flex`,
-                operatingSystem
-                    ? 'motion-safe:animate-fade-in motion-reduce:opacity-11'
-                    : 'opacity-0'
-            )}
-        >
-            <kbd
-                className={`flex h-5 min-w-5 items-center justify-center rounded-sm border border-tint-subtle theme-bold:border-header-link/5 bg-tint-base theme-bold:bg-header-background px-1 ${operatingSystem === 'mac' ? 'text-sm' : ''}`}
-            >
-                {operatingSystem === 'mac' ? '⌘' : 'Ctrl'}
-            </kbd>
-            <kbd className="flex size-5 items-center justify-center rounded-sm border border-tint-subtle theme-bold:border-header-link/5 bg-tint-base theme-bold:bg-header-background px-1">
-                K
-            </kbd>
-        </div>
-    );
-}
diff --git a/packages/gitbook/src/intl/translations/de.ts b/packages/gitbook/src/intl/translations/de.ts
index facc4ca6d4..c3b48024f0 100644
--- a/packages/gitbook/src/intl/translations/de.ts
+++ b/packages/gitbook/src/intl/translations/de.ts
@@ -6,6 +6,7 @@ export const de = {
     switch_to_light_theme: 'Zum hellen Modus wechseln',
     switch_to_system_theme: 'Zum Systemmodus wechseln',
     search: 'Suche',
+    clear: 'Löschen',
     search_back: 'Zurück zu den Suchergebnissen',
     search_or_ask: 'Fragen oder Suchen',
     search_input_placeholder: 'Inhalt durchsuchen',
diff --git a/packages/gitbook/src/intl/translations/en.ts b/packages/gitbook/src/intl/translations/en.ts
index 36e6b2e837..c45fae8807 100644
--- a/packages/gitbook/src/intl/translations/en.ts
+++ b/packages/gitbook/src/intl/translations/en.ts
@@ -6,6 +6,7 @@ export const en = {
     switch_to_light_theme: 'Switch to light theme',
     switch_to_system_theme: 'Switch to system theme',
     search: 'Search',
+    clear: 'Clear',
     search_back: 'Back to search results',
     search_or_ask: 'Ask or search',
     search_input_placeholder: 'Search content',
diff --git a/packages/gitbook/src/intl/translations/es.ts b/packages/gitbook/src/intl/translations/es.ts
index 24f59dd020..b7544a69aa 100644
--- a/packages/gitbook/src/intl/translations/es.ts
+++ b/packages/gitbook/src/intl/translations/es.ts
@@ -8,6 +8,7 @@ export const es: TranslationLanguage = {
     switch_to_light_theme: 'Cambiar a tema claro',
     switch_to_system_theme: 'Cambiar a tema del sistema',
     search: 'Buscar',
+    clear: 'Limpiar',
     search_back: 'Volver a los resultados de búsqueda',
     search_or_ask: 'Preguntar o Buscar',
     search_input_placeholder: 'Buscar contenido',
diff --git a/packages/gitbook/src/intl/translations/fr.ts b/packages/gitbook/src/intl/translations/fr.ts
index f01803ee78..606c1e779e 100644
--- a/packages/gitbook/src/intl/translations/fr.ts
+++ b/packages/gitbook/src/intl/translations/fr.ts
@@ -6,6 +6,7 @@ export const fr = {
     switch_to_light_theme: 'Activer le thème clair',
     switch_to_system_theme: 'Utiliser le thème du système',
     search: 'Rechercher',
+    clear: 'Effacer',
     search_back: 'Retour aux résultats de recherche',
     search_or_ask: 'Rechercher',
     search_input_placeholder: 'Rechercher dans le contenu',
diff --git a/packages/gitbook/src/intl/translations/it.ts b/packages/gitbook/src/intl/translations/it.ts
index 8c8b6269ea..24e2309bbd 100644
--- a/packages/gitbook/src/intl/translations/it.ts
+++ b/packages/gitbook/src/intl/translations/it.ts
@@ -8,6 +8,7 @@ export const it: TranslationLanguage = {
     switch_to_light_theme: 'Passa al tema chiaro',
     switch_to_system_theme: 'Passa al tema di sistema',
     search: 'Cerca',
+    clear: 'Cancella',
     search_back: 'Torna ai risultati di ricerca',
     search_or_ask: 'Chiedi o cerca',
     search_input_placeholder: 'Cerca contenuti',
diff --git a/packages/gitbook/src/intl/translations/ja.ts b/packages/gitbook/src/intl/translations/ja.ts
index 430d3db00b..5ae091c59e 100644
--- a/packages/gitbook/src/intl/translations/ja.ts
+++ b/packages/gitbook/src/intl/translations/ja.ts
@@ -8,6 +8,7 @@ export const ja: TranslationLanguage = {
     switch_to_light_theme: 'ライトテーマに切り替え',
     switch_to_system_theme: 'システムのテーマに切り替え',
     search: '検索',
+    clear: 'クリア',
     search_back: '検索結果に戻る',
     search_or_ask: '質問または検索',
     search_input_placeholder: 'コンテンツを検索',
diff --git a/packages/gitbook/src/intl/translations/nl.ts b/packages/gitbook/src/intl/translations/nl.ts
index 22c9915bb5..ee5a1713f3 100644
--- a/packages/gitbook/src/intl/translations/nl.ts
+++ b/packages/gitbook/src/intl/translations/nl.ts
@@ -8,6 +8,7 @@ export const nl: TranslationLanguage = {
     switch_to_light_theme: 'Schakel over naar lichte modus',
     switch_to_system_theme: 'Schakel over naar systeemmodus',
     search: 'Zoeken',
+    clear: 'Wissen',
     search_back: 'Terug naar zoekresultaten',
     search_or_ask: 'Zoek of vraag',
     search_input_placeholder: 'Zoek inhoud',
diff --git a/packages/gitbook/src/intl/translations/no.ts b/packages/gitbook/src/intl/translations/no.ts
index 2cfef3eb27..cda4278a02 100644
--- a/packages/gitbook/src/intl/translations/no.ts
+++ b/packages/gitbook/src/intl/translations/no.ts
@@ -8,6 +8,7 @@ export const no: TranslationLanguage = {
     switch_to_light_theme: 'Bytt til lyst tema',
     switch_to_system_theme: 'Bytt til systemtema',
     search: 'Søk',
+    clear: 'Tøm',
     search_back: 'Tilbake til søkeresultater',
     search_or_ask: 'Spør eller søk',
     search_input_placeholder: 'Søk i innhold',
diff --git a/packages/gitbook/src/intl/translations/pt-br.ts b/packages/gitbook/src/intl/translations/pt-br.ts
index f6cab27729..55cc8e3ab2 100644
--- a/packages/gitbook/src/intl/translations/pt-br.ts
+++ b/packages/gitbook/src/intl/translations/pt-br.ts
@@ -6,6 +6,7 @@ export const pt_br = {
     switch_to_light_theme: 'Mudar para modo claro',
     switch_to_system_theme: 'Mudar para configuração do sistema',
     search: 'Busca',
+    clear: 'Limpar',
     search_back: 'Voltar aos resultados da busca',
     search_or_ask: 'Perguntar ou buscar',
     search_input_placeholder: 'Buscar conteúdo',
diff --git a/packages/gitbook/src/intl/translations/ru.ts b/packages/gitbook/src/intl/translations/ru.ts
index 07509ce9c7..ad08072996 100644
--- a/packages/gitbook/src/intl/translations/ru.ts
+++ b/packages/gitbook/src/intl/translations/ru.ts
@@ -6,6 +6,7 @@ export const ru = {
     switch_to_light_theme: 'Переключиться на светлую тему',
     switch_to_system_theme: 'Переключиться на системную тему',
     search: 'Поиск',
+    clear: 'Очистить',
     search_back: 'Вернуться к результатам поиска',
     search_or_ask: 'Найти или спросить',
     search_input_placeholder: 'Поиск по содержимому',
diff --git a/packages/gitbook/src/intl/translations/zh.ts b/packages/gitbook/src/intl/translations/zh.ts
index d30e4b5c21..4f96e247e4 100644
--- a/packages/gitbook/src/intl/translations/zh.ts
+++ b/packages/gitbook/src/intl/translations/zh.ts
@@ -8,6 +8,7 @@ export const zh: TranslationLanguage = {
     switch_to_light_theme: '切换到浅色主题',
     switch_to_system_theme: '切换到系统主题',
     search: '搜索',
+    clear: '清除',
     search_back: '返回搜索结果',
     search_or_ask: '询问或搜索',
     search_input_placeholder: '搜索内容',

From d9711c8e9218fccbfd546b00b82135552f119469 Mon Sep 17 00:00:00 2001
From: Zeno Kapitein <zeno@gitbook.io>
Date: Mon, 27 Oct 2025 17:19:56 +0100
Subject: [PATCH 2/2] Update SearchInput.tsx

---
 packages/gitbook/src/components/Search/SearchInput.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/gitbook/src/components/Search/SearchInput.tsx b/packages/gitbook/src/components/Search/SearchInput.tsx
index f84f683784..75427d563d 100644
--- a/packages/gitbook/src/components/Search/SearchInput.tsx
+++ b/packages/gitbook/src/components/Search/SearchInput.tsx
@@ -123,7 +123,7 @@ export const SearchInput = React.forwardRef<HTMLDivElement, SearchInputProps>(
                     />
                     <KeyboardShortcut
                         keys={isOpen ? ['esc'] : ['mod', 'k']}
-                        className="theme-bold:border-header-link/5 theme-bold:bg-header-background theme-bold:text-header-link"
+                        className="last:-mr-1 theme-bold:border-header-link/5 theme-bold:bg-header-background theme-bold:text-header-link"
                     />
                 </div>
             </div>