Merge branch 'main' into stevenh/tooltip-link

Author: emmerich

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

@@ -4,7 +4,7 @@ import { getSiteSpaceURL } from '@/lib/sites';
 import { tcls } from '@/lib/tailwind';
 import type { GitBookSiteContext } from '@v2/lib/context';
 import { DropdownChevron, DropdownMenu } from './DropdownMenu';
-import { SpacesDropdownMenuItem } from './SpacesDropdownMenuItem';
+import { SpacesDropdownMenuItems } from './SpacesDropdownMenuItem';
 
 export function SpacesDropdown(props: {
     context: GitBookSiteContext;
@@ -65,17 +65,14 @@ export function SpacesDropdown(props: {
                 </div>
             }
         >
-            {siteSpaces.map((otherSiteSpace, index) => (
-                <SpacesDropdownMenuItem
-                    key={`${otherSiteSpace.id}-${index}`}
-                    variantSpace={{
-                        id: otherSiteSpace.id,
-                        title: otherSiteSpace.title,
-                        url: getSiteSpaceURL(context, otherSiteSpace),
-                    }}
-                    active={otherSiteSpace.id === siteSpace.id}
-                />
-            ))}
+            <SpacesDropdownMenuItems
+                slimSpaces={siteSpaces.map((space) => ({
+                    id: space.id,
+                    title: space.title,
+                    url: getSiteSpaceURL(context, space),
+                }))}
+                curPath={siteSpace.path}
+            />
         </DropdownMenu>
     );
 }

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

@@ -6,12 +6,28 @@ import { joinPath } from '@/lib/paths';
 import { useCurrentPagePath } from '../hooks';
 import { DropdownMenuItem } from './DropdownMenu';
 
-function useVariantSpaceHref(variantSpaceUrl: string) {
+interface VariantSpace {
+    id: Space['id'];
+    title: Space['title'];
+    url: string;
+}
+
+// When switching to a different variant space, we reconstruct the URL by swapping the space path.
+function useVariantSpaceHref(variantSpaceUrl: string, currentSpacePath: string, active = false) {
     const currentPathname = useCurrentPagePath();
 
+    // We need to ensure that the variant space URL is not the same as the current space path.
+    // If it is, we return only the variant space URL to redirect to the root of the variant space.
+    // This is necessary in case the currentPathname is the same as the variantSpaceUrl,
+    // otherwise we would redirect to the same space if the variant space that we are switching to is the default one.
+    if (!active && currentPathname.startsWith(`${currentSpacePath}/`)) {
+        return variantSpaceUrl;
+    }
+
     if (URL.canParse(variantSpaceUrl)) {
         const targetUrl = new URL(variantSpaceUrl);
         targetUrl.pathname = joinPath(targetUrl.pathname, currentPathname);
+
         targetUrl.searchParams.set('fallback', 'true');
 
         return targetUrl.toString();
@@ -22,15 +38,36 @@ function useVariantSpaceHref(variantSpaceUrl: string) {
 }
 
 export function SpacesDropdownMenuItem(props: {
-    variantSpace: { id: Space['id']; title: Space['title']; url: string };
+    variantSpace: VariantSpace;
     active: boolean;
+    currentSpacePath: string;
 }) {
-    const { variantSpace, active } = props;
-    const variantHref = useVariantSpaceHref(variantSpace.url);
+    const { variantSpace, active, currentSpacePath } = props;
+    const variantHref = useVariantSpaceHref(variantSpace.url, currentSpacePath, active);
 
     return (
         <DropdownMenuItem key={variantSpace.id} href={variantHref} active={active}>
             {variantSpace.title}
         </DropdownMenuItem>
     );
 }
+
+export function SpacesDropdownMenuItems(props: {
+    slimSpaces: VariantSpace[];
+    curPath: string;
+}) {
+    const { slimSpaces, curPath } = props;
+
+    return (
+        <>
+            {slimSpaces.map((space) => (
+                <SpacesDropdownMenuItem
+                    key={space.id}
+                    variantSpace={space}
+                    active={false}
+                    currentSpacePath={curPath}
+                />
+            ))}
+        </>
+    );
+}