diff --git a/.changeset/curly-fishes-accept.md b/.changeset/curly-fishes-accept.md new file mode 100644 index 0000000000..4981e7f72d --- /dev/null +++ b/.changeset/curly-fishes-accept.md @@ -0,0 +1,5 @@ +--- +"gitbook": patch +--- + +Redo search scope UI diff --git a/packages/gitbook/src/components/Search/SearchContainer.tsx b/packages/gitbook/src/components/Search/SearchContainer.tsx index 23347a2c03..4fa3d73b36 100644 --- a/packages/gitbook/src/components/Search/SearchContainer.tsx +++ b/packages/gitbook/src/components/Search/SearchContainer.tsx @@ -240,7 +240,7 @@ export function SearchContainer(props: SearchContainerProps) { } rootProps={{ open: Boolean(visible && (state?.open ?? false)), - modal: isMobile, + modal: false, }} contentProps={{ onOpenAutoFocus: (event) => event.preventDefault(), diff --git a/packages/gitbook/src/components/Search/SearchScopeToggle.tsx b/packages/gitbook/src/components/Search/SearchScopeToggle.tsx index 56bfce368b..3c51174e3b 100644 --- a/packages/gitbook/src/components/Search/SearchScopeToggle.tsx +++ b/packages/gitbook/src/components/Search/SearchScopeToggle.tsx @@ -2,6 +2,7 @@ import { tString, useLanguage } from '@/intl/client'; import type { SiteSection } from '@gitbook/api'; +import { Button, Checkbox, DropdownMenu, DropdownMenuItem } from '../primitives'; import { SegmentedControl, SegmentedControlItem } from '../primitives/SegmentedControl'; import { useSearch } from './useSearch'; @@ -24,80 +25,106 @@ export function SearchScopeToggle(props: { return null; } + // Whether to include all variants in the search + const scopeIsExtended = ['extended', 'all'].includes(state.scope); + return ( <> {withSections ? ( - - {/* `Default` scope = current section's current variant + best match in other sections */} - setSearchState({ ...state, scope: 'default' })} - /> - - {/* `Current` scope = current section's current variant (with further variant scope selection if necessary) */} - setSearchState({ ...state, scope: 'current' })} - /> - - {/* `All` scope = all content on the site. Only visible if site has variants, otherwise it's the same as default */} - {withSiteVariants ? ( +
+ setSearchState({ ...state, scope: 'all' })} + onClick={() => + setSearchState({ + ...state, + scope: scopeIsExtended ? 'all' : 'default', + }) + } /> + + setSearchState({ + ...state, + scope: scopeIsExtended ? 'extended' : 'current', + }) + } + /> + + {withSiteVariants ? ( + + } + > + + setSearchState({ + ...state, + scope: (() => { + switch (state.scope) { + case 'extended': + return 'current'; + case 'current': + return 'extended'; + case 'all': + return 'default'; + default: + return 'all'; + } + })(), + }) + } + active={scopeIsExtended} + > +
+ +
+ Include all variants +
+ Search content in every language/version +
+
+
+
+
) : null} - - ) : null} - {withVariants && - (!withSections || state.scope === 'current' || state.scope === 'extended') ? ( - - {/* `Current` scope = current section's current variant. `Default` on sites without sections. */} +
+ ) : withVariants ? ( + setSearchState({ ...state, - scope: withSections ? 'current' : 'default', + scope: 'default', }) } /> - {/* `Extended` scope = all variants of the current section. `All` on sites without sections. */} - setSearchState({ ...state, scope: withSections ? 'extended' : 'all' }) - } + icon="infinity" + label={tString(language, 'search_scope_all')} + onClick={() => setSearchState({ ...state, scope: 'all' })} /> ) : null} diff --git a/packages/gitbook/src/components/primitives/DropdownMenu.tsx b/packages/gitbook/src/components/primitives/DropdownMenu.tsx index 0f6e69527e..45a1c63d02 100644 --- a/packages/gitbook/src/components/primitives/DropdownMenu.tsx +++ b/packages/gitbook/src/components/primitives/DropdownMenu.tsx @@ -82,7 +82,7 @@ export function DropdownMenu(props: { onMouseLeave={() => setHovered(false)} align={align} side={side} - className="z-40 animate-scale-in border-tint pt-2" + className="z-50 animate-scale-in border-tint pt-2" >
{children} diff --git a/packages/gitbook/src/components/primitives/SegmentedControl.tsx b/packages/gitbook/src/components/primitives/SegmentedControl.tsx index f259ee4b95..8226dfefc8 100644 --- a/packages/gitbook/src/components/primitives/SegmentedControl.tsx +++ b/packages/gitbook/src/components/primitives/SegmentedControl.tsx @@ -9,7 +9,7 @@ export function SegmentedControl(props: { children: React.ReactNode; className?: role="toolbar" aria-orientation="horizontal" className={tcls( - 'mb-2 flex flex-wrap gap-1 circular-corners:rounded-3xl rounded-corners:rounded-lg bg-tint p-1', + 'flex flex-wrap gap-1 circular-corners:rounded-3xl rounded-corners:rounded-lg bg-tint p-1', className )} > diff --git a/packages/gitbook/src/intl/translations/de.ts b/packages/gitbook/src/intl/translations/de.ts index 1254aa8f0e..4dac93df1f 100644 --- a/packages/gitbook/src/intl/translations/de.ts +++ b/packages/gitbook/src/intl/translations/de.ts @@ -17,9 +17,9 @@ export const de = { search_section_result_content: 'Abschnitt mit Inhalt ${1}', search_section_result_default: 'Abschnitt', search_scope_current: '${1}', - search_scope_extended: 'Alle Inhalte', - search_scope_default: 'Beste Match', - search_scope_all: 'Alles', + search_scope_all: 'Überall', + search_scope_include_all_title: 'Alle Varianten einschließen', + search_scope_include_all_description: 'Inhalt in jeder Sprache/Version durchsuchen', ask: 'Fragen', search_ask: 'Fragen "${1}"', search_ask_description: 'Finden Sie die Antwort mit ${1}', diff --git a/packages/gitbook/src/intl/translations/en.ts b/packages/gitbook/src/intl/translations/en.ts index f2fa71a2ec..5197d8661d 100644 --- a/packages/gitbook/src/intl/translations/en.ts +++ b/packages/gitbook/src/intl/translations/en.ts @@ -17,9 +17,9 @@ export const en = { search_section_result_content: 'Section with content ${1}', search_section_result_default: 'Section', search_scope_current: '${1}', - search_scope_extended: 'All content', - search_scope_default: 'Best match', - search_scope_all: 'Everything', + search_scope_all: 'Everywhere', + search_scope_include_all_title: 'Include all variants', + search_scope_include_all_description: 'Search content in every language/version', ask: 'Ask', search_ask: 'Ask "${1}"', search_ask_description: 'Find the answer with ${1}', diff --git a/packages/gitbook/src/intl/translations/es.ts b/packages/gitbook/src/intl/translations/es.ts index 7818b10057..8987b59d9c 100644 --- a/packages/gitbook/src/intl/translations/es.ts +++ b/packages/gitbook/src/intl/translations/es.ts @@ -19,9 +19,9 @@ export const es: TranslationLanguage = { search_section_result_content: 'Sección con contenido ${1}', search_section_result_default: 'Sección', search_scope_current: '${1}', - search_scope_extended: 'Todo el contenido', - search_scope_default: 'Mejor match', - search_scope_all: 'Todo', + search_scope_all: 'En todas partes', + search_scope_include_all_title: 'Incluir todas las variantes', + search_scope_include_all_description: 'Buscar contenido en todos los idiomas/versiones', ask: 'Preguntar', search_ask: 'Preguntar "${1}"', search_ask_description: 'Encuentra la respuesta con ${1}', diff --git a/packages/gitbook/src/intl/translations/fr.ts b/packages/gitbook/src/intl/translations/fr.ts index 0d6f2d4665..11c17435e7 100644 --- a/packages/gitbook/src/intl/translations/fr.ts +++ b/packages/gitbook/src/intl/translations/fr.ts @@ -17,9 +17,9 @@ export const fr = { search_section_result_content: 'Section avec contenu ${1}', search_section_result_default: 'Section', search_scope_current: '${1}', - search_scope_extended: 'Tous les contenus', - search_scope_default: 'Meilleur match', - search_scope_all: 'Tout', + search_scope_all: 'Partout', + search_scope_include_all_title: 'Inclure toutes les variantes', + search_scope_include_all_description: 'Rechercher le contenu dans toutes les langues/versions', ask: 'Poser une question', search_ask: 'Demander « ${1} »', search_ask_description: 'Trouvez la réponse avec ${1}', diff --git a/packages/gitbook/src/intl/translations/ja.ts b/packages/gitbook/src/intl/translations/ja.ts index 4f837d7bf2..2c30fc7f46 100644 --- a/packages/gitbook/src/intl/translations/ja.ts +++ b/packages/gitbook/src/intl/translations/ja.ts @@ -19,9 +19,9 @@ export const ja: TranslationLanguage = { search_section_result_content: 'コンテンツ「${1}」のセクション', search_section_result_default: 'セクション', search_scope_current: '${1}', - search_scope_extended: '全てのコンテンツ', - search_scope_default: '最適なマッチ', - search_scope_all: 'すべて', + search_scope_all: 'どこでも', + search_scope_include_all_title: 'すべてのバリエーションを含める', + search_scope_include_all_description: 'すべての言語/バージョンでコンテンツを検索', ask: '質問する', search_ask: '"${1}" を質問する', search_ask_description: '${1}で答えを見つける', diff --git a/packages/gitbook/src/intl/translations/nl.ts b/packages/gitbook/src/intl/translations/nl.ts index 23de35e4fa..d72a115c95 100644 --- a/packages/gitbook/src/intl/translations/nl.ts +++ b/packages/gitbook/src/intl/translations/nl.ts @@ -19,9 +19,9 @@ export const nl: TranslationLanguage = { search_section_result_content: 'Sectie met inhoud ${1}', search_section_result_default: 'Sectie', search_scope_current: '${1}', - search_scope_extended: 'Alle inhoud', - search_scope_default: 'Beste match', - search_scope_all: 'Alles', + search_scope_all: 'Overal', + search_scope_include_all_title: 'Alle varianten opnemen', + search_scope_include_all_description: 'Zoek inhoud in elke taal/versie', ask: 'Vragen', search_ask: 'Vraag "${1}"', search_ask_description: 'Vind het antwoord met ${1}', diff --git a/packages/gitbook/src/intl/translations/no.ts b/packages/gitbook/src/intl/translations/no.ts index 9942aa5675..8fa6fd6c45 100644 --- a/packages/gitbook/src/intl/translations/no.ts +++ b/packages/gitbook/src/intl/translations/no.ts @@ -19,9 +19,9 @@ export const no: TranslationLanguage = { search_section_result_content: 'Seksjon med innhold ${1}', search_section_result_default: 'Seksjon', search_scope_current: '${1}', - search_scope_extended: 'Alt innhold', - search_scope_default: 'Beste treff', - search_scope_all: 'Alt', + search_scope_all: 'Overalt', + search_scope_include_all_title: 'Inkluder alle varianter', + search_scope_include_all_description: 'Søk innhold på alle språk/versjoner', ask: 'Spør', search_ask: 'Spør "${1}"', search_ask_description: 'Finn svaret med ${1}', diff --git a/packages/gitbook/src/intl/translations/pt-br.ts b/packages/gitbook/src/intl/translations/pt-br.ts index 8cad5b408f..5e2f83ce72 100644 --- a/packages/gitbook/src/intl/translations/pt-br.ts +++ b/packages/gitbook/src/intl/translations/pt-br.ts @@ -17,9 +17,9 @@ export const pt_br = { search_section_result_content: 'Seção com conteúdo ${1}', search_section_result_default: 'Seção', search_scope_current: '${1}', - search_scope_extended: 'Todo o conteúdo', - search_scope_default: 'Melhor match', - search_scope_all: 'Tudo', + search_scope_all: 'Em todos os lugares', + search_scope_include_all_title: 'Incluir todas as variantes', + search_scope_include_all_description: 'Buscar conteúdo em todos os idiomas/versões', ask: 'Perguntar', search_ask: 'Perguntar "${1}"', search_ask_description: 'Encontre a resposta com ${1}', diff --git a/packages/gitbook/src/intl/translations/ru.ts b/packages/gitbook/src/intl/translations/ru.ts index 73c52bec34..2adf7b6d36 100644 --- a/packages/gitbook/src/intl/translations/ru.ts +++ b/packages/gitbook/src/intl/translations/ru.ts @@ -17,9 +17,9 @@ export const ru = { search_section_result_content: 'Раздел с контентом ${1}', search_section_result_default: 'Раздел', search_scope_current: '${1}', - search_scope_extended: 'Все материалы', - search_scope_default: 'Лучший матч', - search_scope_all: 'Всё', + search_scope_all: 'Везде', + search_scope_include_all_title: 'Включить все варианты', + search_scope_include_all_description: 'Искать контент на всех языках/версиях', ask: 'Спросить', search_ask: 'Спросить "${1}"', search_ask_description: 'Найти ответ с помощью ${1}', diff --git a/packages/gitbook/src/intl/translations/zh.ts b/packages/gitbook/src/intl/translations/zh.ts index ab83e28c68..6aa3f64d62 100644 --- a/packages/gitbook/src/intl/translations/zh.ts +++ b/packages/gitbook/src/intl/translations/zh.ts @@ -19,9 +19,9 @@ export const zh: TranslationLanguage = { search_section_result_content: '内容为"${1}"的章节', search_section_result_default: '章节', search_scope_current: '${1}', - search_scope_extended: '所有内容', - search_scope_default: '最佳匹配', - search_scope_all: '全部', + search_scope_all: '任何地方', + search_scope_include_all_title: '包含所有变体', + search_scope_include_all_description: '在所有语言/版本中搜索内容', ask: '询问', search_ask: '询问"${1}"', search_ask_description: '利用${1}找到答案',