Add SideSheet component, refactor TOC and AIChat to use it

.changeset/curly-eels-carry.md

@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Add sidesheet component, use it for TOC and AIChat

packages/gitbook/src/app/sites/dynamic/[mode]/[siteURL]/[siteData]/(content)/layout.tsx

@@ -23,7 +23,8 @@ export default async function SiteDynamicLayout({
 
     return (
         <CustomizationRootLayout
-            className="site-background"
+            htmlClassName="sheet-open:gutter-stable"
+            bodyClassName="site-background"
             forcedTheme={forcedTheme}
             context={context}
         >

packages/gitbook/src/app/sites/static/[mode]/[siteURL]/[siteData]/(content)/layout.tsx

@@ -19,7 +19,11 @@ export default async function SiteStaticLayout({
     const withTracking = shouldTrackEvents();
 
     return (
-        <CustomizationRootLayout className="site-background" context={context}>
+        <CustomizationRootLayout
+            htmlClassName="sheet-open:gutter-stable"
+            bodyClassName="site-background"
+            context={context}
+        >
             <SiteLayout
                 context={context}
                 withTracking={withTracking}

packages/gitbook/src/components/AIChat/AIChat.tsx

@@ -27,6 +27,7 @@ import { useTrackEvent } from '../Insights';
 import { useNow } from '../hooks';
 import { Button } from '../primitives';
 import { ScrollContainer } from '../primitives/ScrollContainer';
+import { SideSheet } from '../primitives/SideSheet';
 import { AIChatControlButton } from './AIChatControlButton';
 import { AIChatIcon } from './AIChatIcon';
 import { AIChatInput } from './AIChatInput';
@@ -69,16 +70,23 @@ export function AIChat() {
     }, [chat.opened, trackEvent]);
 
     return (
-        <div
+        <SideSheet
+            side="right"
+            open={chat.opened}
+            onOpenChange={(open) => {
+                if (open) {
+                    chatController.open();
+                } else {
+                    chatController.close();
+                }
+            }}
             data-testid="ai-chat"
+            withScrim={true}
             className={tcls(
-                'ai-chat inset-y-0 right-0 z-40 mx-auto flex max-w-3xl scroll-mt-36 px-4 py-4 transition-[width,opacity,margin,display] transition-discrete duration-300 sm:px-6 lg:fixed lg:w-80 lg:p-0 xl:w-96',
-                chat.opened
-                    ? 'lg:starting:ml-0 lg:starting:w-0 lg:starting:opacity-0'
-                    : 'hidden lg:ml-0 lg:w-0! lg:opacity-0'
+                'ai-chat mx-auto ml-8 not-hydrated:hidden w-96 transition-[width] duration-300 ease-quint lg:max-xl:w-80'
             )}
         >
-            <EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base transition-all duration-300 max-lg:circular-corners:rounded-3xl max-lg:rounded-corners:rounded-md max-lg:border lg:w-80 xl:w-96">
+            <EmbeddableFrame className="relative shrink-0 border-tint-subtle border-l to-tint-base">
                 <EmbeddableFrameMain>
                     <EmbeddableFrameHeader>
                         <AIChatDynamicIcon trademark={config.trademark} />
@@ -109,7 +117,7 @@ export function AIChat() {
                     </EmbeddableFrameBody>
                 </EmbeddableFrameMain>
             </EmbeddableFrame>
-        </div>
+        </SideSheet>
     );
 }
 
@@ -221,8 +229,8 @@ export function AIChatBody(props: {
                 className="shrink grow basis-80 animate-fade-in-slow [container-type:size]"
                 contentClassName="p-4 gutter-stable flex flex-col gap-4"
                 orientation="vertical"
-                fadeEdges={['leading']}
-                active={`message-group-${chat.messages.filter((message) => message.role === 'user').length - 1}`}
+                trailing={{ fade: false, button: true }}
+                active={`#message-group-${chat.messages.filter((message) => message.role === 'user').length - 1}`}
             >
                 {isEmpty ? (
                     <div className="flex grow flex-col">

packages/gitbook/src/components/Announcement/AnnouncementBanner.tsx

@@ -35,66 +35,68 @@ export function AnnouncementBanner(props: {
             data-nosnippet=""
         >
             <div className="transition-all duration-300 lg:chat-open:pr-80 xl:chat-open:pr-96">
-                <div className={tcls('relative', CONTAINER_STYLE)}>
-                    <Tag
-                        href={contentRef?.href ?? ''}
-                        className={tcls(
-                            'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
-                            style.container,
-                            closeable && 'pr-12',
-                            hasLink && style.hover
-                        )}
-                        insights={
-                            announcement.link
-                                ? {
-                                      type: 'link_click',
-                                      link: {
-                                          target: announcement.link.to,
-                                          position: SiteInsightsLinkPosition.Announcement,
-                                      },
-                                  }
-                                : undefined
-                        }
-                    >
-                        <Icon
-                            icon={style.icon as IconName}
-                            className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
-                        />
-                        <div>
-                            {announcement.message}
-                            {hasLink ? (
-                                <div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
-                                    {contentRef?.icon ? (
-                                        <span className="mr-1 ml-2 *:inline">
-                                            {contentRef?.icon}
-                                        </span>
-                                    ) : null}
-                                    {announcement.link?.title && (
-                                        <span className="mr-1">{announcement.link?.title}</span>
-                                    )}
-                                    <Icon
-                                        icon={
-                                            announcement.link?.to.kind === 'url'
-                                                ? 'arrow-up-right'
-                                                : 'chevron-right'
-                                        }
-                                        className={tcls('mb-0.5 inline size-3')}
-                                    />
-                                </div>
-                            ) : null}
-                        </div>
-                    </Tag>
-                    {closeable ? (
-                        <Button
-                            iconOnly
-                            icon="close"
-                            label={tString(language, 'close')}
-                            variant="blank"
-                            size="default"
-                            onClick={dismissAnnouncement}
-                            className={`absolute top-0 right-4 mt-2 mr-2 circular-corners:rounded-lg rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 sm:right-6 md:right-8 ${style.close}`}
-                        />
-                    ) : null}
+                <div className={tcls(CONTAINER_STYLE)}>
+                    <div className="relative">
+                        <Tag
+                            href={contentRef?.href ?? ''}
+                            className={tcls(
+                                'flex w-full items-start justify-center overflow-hidden circular-corners:rounded-xl rounded-md straight-corners:rounded-none px-4 py-3 text-neutral-strong text-sm theme-bold:ring-1 theme-gradient:ring-1 ring-inset transition-colors',
+                                style.container,
+                                closeable && 'pr-12',
+                                hasLink && style.hover
+                            )}
+                            insights={
+                                announcement.link
+                                    ? {
+                                          type: 'link_click',
+                                          link: {
+                                              target: announcement.link.to,
+                                              position: SiteInsightsLinkPosition.Announcement,
+                                          },
+                                      }
+                                    : undefined
+                            }
+                        >
+                            <Icon
+                                icon={style.icon as IconName}
+                                className={`mt-0.5 mr-3 size-4 shrink-0 ${style.iconColor}`}
+                            />
+                            <div>
+                                {announcement.message}
+                                {hasLink ? (
+                                    <div className={tcls(LinkStyles, style.link, 'ml-1 inline')}>
+                                        {contentRef?.icon ? (
+                                            <span className="mr-1 ml-2 *:inline">
+                                                {contentRef?.icon}
+                                            </span>
+                                        ) : null}
+                                        {announcement.link?.title && (
+                                            <span className="mr-1">{announcement.link?.title}</span>
+                                        )}
+                                        <Icon
+                                            icon={
+                                                announcement.link?.to.kind === 'url'
+                                                    ? 'arrow-up-right'
+                                                    : 'chevron-right'
+                                            }
+                                            className={tcls('mb-0.5 inline size-3')}
+                                        />
+                                    </div>
+                                ) : null}
+                            </div>
+                        </Tag>
+                        {closeable ? (
+                            <Button
+                                iconOnly
+                                icon="close"
+                                label={tString(language, 'close')}
+                                variant="blank"
+                                size="default"
+                                onClick={dismissAnnouncement}
+                                className={`absolute top-0 right-0 mt-2 mr-2 circular-corners:rounded-lg rounded-sm straight-corners:rounded-none p-1.5 transition-all hover:ring-1 ${style.close}`}
+                            />
+                        ) : null}
+                    </div>
                 </div>
             </div>
         </div>

packages/gitbook/src/components/Cookies/CookiesToast.tsx

@@ -41,7 +41,7 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
             aria-describedby={describedById}
             className={tcls(
                 'fixed',
-                'z-10',
+                'z-50',
                 'bg-tint-base',
                 'rounded-sm',
                 'straight-corners:rounded-none',
@@ -52,9 +52,9 @@ export function CookiesToast(props: { privacyPolicy?: string }) {
                 'depth-flat:shadow-none',
                 'p-4',
                 'pr-8',
-                'bottom-4',
-                'right-4',
-                'left-16',
+                'bottom-[max(env(safe-area-inset-bottom),1rem)]',
+                'right-[max(env(safe-area-inset-right),1rem)]',
+                'left-[max(env(safe-area-inset-left),4rem)]',
                 'max-w-md',
                 'text-balance',
                 'sm:left-auto',

packages/gitbook/src/components/Embeddable/EmbeddableDocsPage.tsx

@@ -79,9 +79,9 @@ export async function EmbeddableDocsPage(
                         orientation="vertical"
                         className="not-hydrated:animate-blur-in-slow"
                         contentClassName="p-4"
-                        fadeEdges={context.sections ? [] : ['leading']}
+                        leading={{ fade: !context.sections, button: true }}
                     >
-                        <TableOfContents className="pt-0" context={context} />
+                        <TableOfContents context={context} />
                         <PageBody
                             context={context}
                             page={page}

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

@@ -42,6 +42,7 @@ export function Header(props: {
                 `h-[${HEADER_HEIGHT_DESKTOP}px]`,
                 'sticky',
                 'top-0',
+                'pt-[env(safe-area-inset-top)]',
                 'z-30',
                 'w-full',
                 'flex-none',

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

@@ -1,42 +1,20 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect } from 'react';
 
 import { tString, useLanguage } from '@/intl/client';
 
-import { useScrollListener } from '../hooks/useScrollListener';
 import { Button, type ButtonProps } from '../primitives';
 
 const globalClassName = 'navigation-open';
 
-const SCROLL_DISTANCE = 320;
-
 /**
  * Button to show/hide the table of content on mobile.
  */
 export function HeaderMobileMenu(props: ButtonProps) {
     const language = useLanguage();
 
     const pathname = usePathname();
-    const hasScrollRef = useRef(false);
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    const toggleNavigation = () => {
-        if (!hasScrollRef.current && document.body.classList.contains(globalClassName)) {
-            document.body.classList.remove(globalClassName);
-            setIsOpen(false);
-        } else {
-            document.body.classList.add(globalClassName);
-            window.scrollTo(0, 0);
-            setIsOpen(true);
-        }
-    };
-
-    const windowRef = useRef(typeof window === 'undefined' ? null : window);
-    useScrollListener(() => {
-        hasScrollRef.current = window.scrollY >= SCROLL_DISTANCE;
-    }, windowRef);
 
     // Close the navigation when navigating to a page
     useEffect(() => {
@@ -50,8 +28,10 @@ export function HeaderMobileMenu(props: ButtonProps) {
             variant="blank"
             size="default"
             label={tString(language, 'table_of_contents_button_label')}
-            onClick={toggleNavigation}
-            active={isOpen}
+            onClick={() => {
+                document.body.classList.toggle(globalClassName);
+            }}
+            // Since the button is hidden behind the TOC after toggling, we don't need to keep track of its active state.
             {...props}
         />
     );

packages/gitbook/src/components/RootLayout/CustomizationRootLayout.tsx

@@ -57,13 +57,15 @@ function preloadFont(fontData: FontData) {
  * It takes care of setting the theme and the language.
  */
 export async function CustomizationRootLayout(props: {
+    /** The class name to apply to the html element. */
+    htmlClassName?: string;
     /** The class name to apply to the body element. */
-    className?: string;
+    bodyClassName?: string;
     forcedTheme?: CustomizationThemeMode | null;
     context: GitBookAnyContext;
     children: React.ReactNode;
 }) {
-    const { className, context, forcedTheme, children } = props;
+    const { htmlClassName, bodyClassName, context, forcedTheme, children } = props;
     const customization =
         'customization' in context ? context.customization : defaultCustomization();
 
@@ -107,7 +109,8 @@ export async function CustomizationRootLayout(props: {
                 // Set the dark/light class statically to avoid flashing and make it work when JS is disabled
                 (forcedTheme ?? customization.themes.default) === CustomizationThemeMode.Dark
                     ? 'dark'
-                    : ''
+                    : '',
+                htmlClassName
             )}
         >
             <head>
@@ -179,7 +182,7 @@ export async function CustomizationRootLayout(props: {
                     }
                 `}</style>
             </head>
-            <body className={className}>
+            <body className={tcls(bodyClassName, 'sheet-open:overflow-hidden')}>
                 <IconsProvider
                     assetsURL={GITBOOK_ICONS_URL}
                     assetsURLToken={GITBOOK_ICONS_TOKEN}

packages/gitbook/src/components/SiteLayout/SiteLayout.tsx

@@ -101,6 +101,7 @@ export async function generateSiteLayoutViewport(context: GitBookSiteContext): P
         width: 'device-width',
         initialScale: 1,
         maximumScale: 1,
+        viewportFit: 'cover',
     };
 }
 

packages/gitbook/src/components/SiteSections/SiteSectionList.tsx

@@ -40,7 +40,7 @@ export function SiteSectionList(props: { sections: ClientSiteSections; className
                     orientation="vertical"
                     style={{ maxHeight: `${MAX_ITEMS * 3 + 2}rem` }}
                     className="pb-4"
-                    active={currentSection.id}
+                    active={`#${currentSection.id}`}
                 >
                     <div className="flex w-full flex-col px-2">
                         {sectionsAndGroups.map((item) => {

packages/gitbook/src/components/SiteSections/SiteSectionTabs.tsx

@@ -76,8 +76,12 @@ export function SiteSectionTabs(props: {
                         ? 'md:-mr-8 -mr-4 sm:-mr-6'
                         : 'after:contents[] after:absolute after:inset-y-2 after:right-0 after:border-transparent after:border-r after:transition-colors'
                 )}
-                active={currentSection.id}
-                trailingEdgeScrollClassName={children ? 'after:border-tint' : ''}
+                active={`#${currentSection.id}`}
+                trailing={{
+                    fade: true,
+                    button: true,
+                    className: children ? 'after:border-tint' : '',
+                }}
             >
                 <NavigationMenu.List
                     className={tcls(