SearchInput fixes (#3762)

Author: zenoachtig

.changeset/cold-dancers-buy.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+SearchInput fixes — Translate Clear button, Bold theme color, "Esc" keyboard shortcut

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="last:-mr-1 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>
-    );
-}

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',

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',

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',

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',

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',

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: 'コンテンツを検索',

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',

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',