Redo search scopes

.changeset/curly-fishes-accept.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Redo search scope UI

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(),

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 ? (
-                <SegmentedControl className="animate-scale-in">
-                    {/* `Default` scope = current section's current variant + best match in other sections */}
-                    <SegmentedControlItem
-                        active={
-                            withSiteVariants
-                                ? state.scope === 'default'
-                                : ['default', 'all'].includes(state.scope)
-                        }
-                        label={
-                            withSiteVariants
-                                ? tString(language, 'search_scope_default')
-                                : tString(language, 'search_scope_all')
-                        }
-                        className={withSiteVariants ? '@max-md:basis-full' : ''}
-                        icon={withSiteVariants ? 'bullseye-arrow' : 'infinity'}
-                        onClick={() => setSearchState({ ...state, scope: 'default' })}
-                    />
-
-                    {/* `Current` scope = current section's current variant (with further variant scope selection if necessary) */}
-                    <SegmentedControlItem
-                        active={state.scope === 'current' || state.scope === 'extended'}
-                        icon={section?.icon ?? 'crosshairs'}
-                        label={tString(language, 'search_scope_current', section?.title)}
-                        onClick={() => 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 ? (
+                <div className="mb-2 flex items-center gap-2">
+                    <SegmentedControl className="grow animate-scale-in">
                         <SegmentedControlItem
-                            active={state.scope === 'all'}
+                            active={['default', 'all'].includes(state.scope)}
                             label={tString(language, 'search_scope_all')}
                             icon="infinity"
-                            onClick={() => setSearchState({ ...state, scope: 'all' })}
+                            onClick={() =>
+                                setSearchState({
+                                    ...state,
+                                    scope: scopeIsExtended ? 'all' : 'default',
+                                })
+                            }
                         />
+                        <SegmentedControlItem
+                            active={['current', 'extended'].includes(state.scope)}
+                            icon={section?.icon}
+                            label={tString(language, 'search_scope_current', section?.title)}
+                            onClick={() =>
+                                setSearchState({
+                                    ...state,
+                                    scope: scopeIsExtended ? 'extended' : 'current',
+                                })
+                            }
+                        />
+                    </SegmentedControl>
+                    {withSiteVariants ? (
+                        <DropdownMenu
+                            button={
+                                <Button
+                                    icon="ellipsis"
+                                    iconOnly
+                                    size="default"
+                                    variant="blank"
+                                    label={tString(language, 'more')}
+                                    className="shrink-0"
+                                    active={scopeIsExtended}
+                                />
+                            }
+                        >
+                            <DropdownMenuItem
+                                onClick={() =>
+                                    setSearchState({
+                                        ...state,
+                                        scope: (() => {
+                                            switch (state.scope) {
+                                                case 'extended':
+                                                    return 'current';
+                                                case 'current':
+                                                    return 'extended';
+                                                case 'all':
+                                                    return 'default';
+                                                default:
+                                                    return 'all';
+                                            }
+                                        })(),
+                                    })
+                                }
+                                active={scopeIsExtended}
+                            >
+                                <div className="flex items-center gap-3">
+                                    <Checkbox checked={scopeIsExtended} />
+                                    <div className="flex flex-col items-start">
+                                        Include all variants
+                                        <div className="text-tint-subtle text-xs">
+                                            Search content in every language/version
+                                        </div>
+                                    </div>
+                                </div>
+                            </DropdownMenuItem>
+                        </DropdownMenu>
                     ) : null}
-                </SegmentedControl>
-            ) : null}
-            {withVariants &&
-            (!withSections || state.scope === 'current' || state.scope === 'extended') ? (
-                <SegmentedControl className="animate-scale-in">
-                    {/* `Current` scope = current section's current variant. `Default` on sites without sections. */}
+                </div>
+            ) : withVariants ? (
+                <SegmentedControl className="mb-2 animate-scale-in">
                     <SegmentedControlItem
                         size={withSections ? 'small' : 'medium'}
-                        active={
-                            withSections
-                                ? state.scope === 'current'
-                                : ['default', 'current'].includes(state.scope)
-                        }
+                        active={!scopeIsExtended}
                         className="py-1"
                         label={tString(language, 'search_scope_current', spaceTitle)}
                         onClick={() =>
                             setSearchState({
                                 ...state,
-                                scope: withSections ? 'current' : 'default',
+                                scope: 'default',
                             })
                         }
                     />
 
-                    {/* `Extended` scope = all variants of the current section. `All` on sites without sections. */}
                     <SegmentedControlItem
                         size={withSections ? 'small' : 'medium'}
-                        active={
-                            withSections
-                                ? state.scope === 'extended'
-                                : ['extended', 'all'].includes(state.scope)
-                        }
+                        active={scopeIsExtended}
                         className="py-1"
-                        label={tString(language, 'search_scope_extended')}
-                        onClick={() =>
-                            setSearchState({ ...state, scope: withSections ? 'extended' : 'all' })
-                        }
+                        icon="infinity"
+                        label={tString(language, 'search_scope_all')}
+                        onClick={() => setSearchState({ ...state, scope: 'all' })}
                     />
                 </SegmentedControl>
             ) : null}

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"
                     >
                         <div
                             className={tcls(
@@ -214,7 +214,7 @@ export function DropdownSubMenu(props: { children: React.ReactNode; label: React
                 <RadixDropdownMenu.SubContent
                     hideWhenDetached
                     collisionPadding={8}
-                    className="z-40 animate-present"
+                    className="z-50 animate-present"
                 >
                     <div className="flex max-h-96 min-w-40 max-w-[40vw] flex-col gap-1 overflow-auto rounded-lg straight-corners:rounded-sm bg-tint-base p-2 shadow-lg ring-1 ring-tint-subtle sm:min-w-52 sm:max-w-80">
                         {children}

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
             )}
         >

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

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

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

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

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}で答えを見つける',

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

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

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

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

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}找到答案',