Support translations and generic variants together

Add rudimentary support for translations & generic variants to be used on the same site.
- Refactor `withVariants` into a `variants` object that contains two arrays for the different types: `translations` and `generic`.
- Switch the logic around to check these two arrays independently of each other.
- If there are any translations (spaces with a different language than the current), the menu dropdown is shown. If there are any generic variants (spaces with the same language as the current), the variant dropdown is shown.

Author: zenoachtig

.changeset/rich-hairs-check.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Support translations and generic variants together

packages/gitbook/src/components/Header/Header.tsx

@@ -3,6 +3,7 @@ import type { GitBookSiteContext } from '@/lib/context';
 import { CONTAINER_STYLE, HEADER_HEIGHT_DESKTOP } from '@/components/layout';
 import { getSpaceLanguage, t } from '@/intl/server';
 import { tcls } from '@/lib/tailwind';
+import type { SiteSpace } from '@gitbook/api';
 import { SearchContainer } from '../Search';
 import { SiteSectionTabs, encodeClientSiteSections } from '../SiteSections';
 import { HeaderLink } from './HeaderLink';
@@ -18,9 +19,12 @@ import { TranslationsDropdown } from './SpacesDropdown';
 export function Header(props: {
     context: GitBookSiteContext;
     withTopHeader?: boolean;
-    withVariants?: 'generic' | 'translations';
+    variants: {
+        generic: SiteSpace[];
+        translations: SiteSpace[];
+    };
 }) {
-    const { context, withTopHeader, withVariants } = props;
+    const { context, withTopHeader, variants } = props;
     const { siteSpace, siteSpaces, sections, customization } = context;
 
     const withSections = Boolean(
@@ -91,7 +95,7 @@ export function Header(props: {
                                     'theme-bold:text-header-link',
                                     'hover:bg-tint-hover',
                                     'hover:theme-bold:bg-header-link/3',
-                                    withVariants === 'generic'
+                                    variants.generic.length > 1
                                         ? 'xl:hidden'
                                         : 'page-no-toc:hidden lg:hidden'
                                 )}
@@ -126,7 +130,7 @@ export function Header(props: {
                         >
                             <SearchContainer
                                 style={customization.styling.search}
-                                withVariants={withVariants === 'generic'}
+                                withVariants={variants.generic.length > 1}
                                 withSiteVariants={
                                     sections?.list.some(
                                         (s) =>
@@ -150,7 +154,7 @@ export function Header(props: {
                         </div>
 
                         {customization.header.links.length > 0 ||
-                        (!withSections && withVariants === 'translations') ? (
+                        (!withSections && variants.translations.length > 1) ? (
                             <HeaderLinks>
                                 {customization.header.links.length > 0 ? (
                                     <>
@@ -170,11 +174,11 @@ export function Header(props: {
                                         />
                                     </>
                                 ) : null}
-                                {!withSections && withVariants === 'translations' ? (
+                                {!withSections && variants.translations.length > 1 ? (
                                     <TranslationsDropdown
                                         context={context}
                                         siteSpace={siteSpace}
-                                        siteSpaces={siteSpaces}
+                                        siteSpaces={variants.translations}
                                         className="flex! theme-bold:text-header-link hover:theme-bold:bg-header-link/3"
                                     />
                                 ) : null}
@@ -187,11 +191,11 @@ export function Header(props: {
             {sections && withSections ? (
                 <div className="transition-[padding] duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
                     <SiteSectionTabs sections={encodeClientSiteSections(context, sections)}>
-                        {withVariants === 'translations' ? (
+                        {variants.translations.length > 1 ? (
                             <TranslationsDropdown
                                 context={context}
                                 siteSpace={siteSpace}
-                                siteSpaces={siteSpaces}
+                                siteSpaces={variants.translations}
                                 className="my-2 ml-2 self-start"
                             />
                         ) : null}

packages/gitbook/src/components/SpaceLayout/SpaceLayout.tsx

@@ -3,6 +3,7 @@ import {
     CustomizationAIMode,
     CustomizationHeaderPreset,
     CustomizationSearchStyle,
+    type SiteSpace,
 } from '@gitbook/api';
 import type React from 'react';
 
@@ -106,15 +107,20 @@ export function SpaceLayout(props: SpaceLayoutProps) {
 
     const withSections = Boolean(sections && sections.list.length > 1);
 
-    const currentLanguage = getSpaceLanguage(context);
-    const withVariants: 'generic' | 'translations' | undefined =
-        siteSpaces.length > 1
-            ? siteSpaces.some(
-                  (space) => space.space.language && space.space.language !== currentLanguage.locale
-              )
-                ? 'translations'
-                : 'generic'
-            : undefined;
+    const currentLanguage = getSpaceLanguage(context).locale;
+    const variants: Record<'generic' | 'translations', SiteSpace[]> = {
+        translations: siteSpaces.filter(
+            (space) =>
+                space === siteSpace ||
+                (space.space.language && space.space.language !== currentLanguage)
+        ),
+        generic: siteSpaces.filter(
+            (space) =>
+                space === siteSpace ||
+                !space.space.language ||
+                space.space.language === currentLanguage
+        ),
+    };
 
     const withFooter =
         customization.themes.toggeable ||
@@ -125,7 +131,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
     return (
         <SpaceLayoutServerContext {...props}>
             <Announcement context={context} />
-            <Header withTopHeader={withTopHeader} withVariants={withVariants} context={context} />
+            <Header withTopHeader={withTopHeader} variants={variants} context={context} />
             <NavigationLoader />
             {customization.ai?.mode === CustomizationAIMode.Assistant ? (
                 <AIChat trademark={customization.trademark.enabled} />
@@ -165,11 +171,11 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                                     )}
                                 >
                                     <HeaderLogo context={context} />
-                                    {withVariants === 'translations' ? (
+                                    {variants.translations.length > 1 ? (
                                         <TranslationsDropdown
                                             context={context}
                                             siteSpace={siteSpace}
-                                            siteSpaces={siteSpaces}
+                                            siteSpaces={variants.translations}
                                             className="[&_.button-leading-icon]:block! ml-auto py-2 [&_.button-content]:hidden"
                                         />
                                     ) : null}
@@ -183,7 +189,7 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                                     <div className="flex gap-2">
                                         <SearchContainer
                                             style={CustomizationSearchStyle.Subtle}
-                                            withVariants={withVariants === 'generic'}
+                                            withVariants={variants.generic.length > 1}
                                             withSiteVariants={
                                                 sections?.list.some(
                                                     (s) =>
@@ -213,14 +219,14 @@ export function SpaceLayout(props: SpaceLayoutProps) {
                                         sections={encodeClientSiteSections(context, sections)}
                                     />
                                 )}
-                                {withVariants === 'generic' && (
+                                {variants.generic.length > 1 ? (
                                     <SpacesDropdown
                                         context={context}
                                         siteSpace={siteSpace}
-                                        siteSpaces={siteSpaces}
+                                        siteSpaces={variants.generic}
                                         className="w-full px-3 py-2"
                                     />
-                                )}
+                                ) : null}
                             </>
                         }
                     />