Add breadcrumbs to search results

.changeset/giant-carrots-divide.md

@@ -0,0 +1,5 @@
+---
+'gitbook': patch
+---
+
+Add breadcrumbs to search results

packages/gitbook/src/components/Search/SearchPageResultItem.tsx

@@ -1,7 +1,7 @@
-import { Icon } from '@gitbook/icons';
+import { tcls } from '@/lib/tailwind';
+import { Icon, type IconName } from '@gitbook/icons';
 import React from 'react';
 
-import { tcls } from '@/lib/tailwind';
 import { Link } from '../primitives';
 import { HighlightQuery } from './HighlightQuery';
 import type { ComputedPageResult } from './server-actions';
@@ -16,6 +16,23 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
 ) {
     const { query, item, active } = props;
 
+    const breadcrumbs: (string | React.ReactNode)[] = item.ancestors.map(
+        (ancestor) => ancestor.title
+    );
+    if (item.spaceTitle) {
+        breadcrumbs.unshift(item.spaceTitle);
+    }
+    if (item.section) {
+        breadcrumbs.unshift(
+            <span className="flex items-center gap-1">
+                {item.section.icon ? (
+                    <Icon className="size-3" icon={item.section.icon as IconName} />
+                ) : null}
+                {item.section.title}
+            </span>
+        );
+    }
+
     return (
         <Link
             ref={ref}
@@ -53,18 +70,43 @@ export const SearchPageResultItem = React.forwardRef(function SearchPageResultIt
                 />
             </div>
             <div className={tcls('flex', 'flex-col', 'w-full')}>
-                {item.spaceTitle ? (
+                {breadcrumbs.length > 0 ? (
                     <div
                         className={tcls(
                             'text-xs',
                             'opacity-6',
                             'font-normal',
                             'uppercase',
                             'tracking-wider',
-                            'mb-1'
+                            'mb-1',
+                            'flex',
+                            'flex-wrap',
+                            'gap-x-2',
+                            'gap-y-1',
+                            'items-center'
                         )}
                     >
-                        {item.spaceTitle}
+                        {(breadcrumbs.length > 3
+                            ? [
+                                  ...breadcrumbs.slice(0, 2),
+                                  <Icon key="ellipsis" icon="ellipsis-h" className="size-3" />,
+                                  ...breadcrumbs.slice(-1),
+                              ]
+                            : breadcrumbs
+                        ).map((crumb, index) => (
+                            <>
+                                {index !== 0 ? (
+                                    <Icon
+                                        key={`${index}-icon`}
+                                        icon="chevron-right"
+                                        className="size-3"
+                                    />
+                                ) : null}
+                                <span key={index} className="line-clamp-1">
+                                    {crumb}
+                                </span>
+                            </>
+                        ))}
                     </div>
                 ) : null}
                 <HighlightQuery query={query} text={item.title} />

packages/gitbook/src/components/Search/server-actions.tsx

@@ -1,7 +1,7 @@
 'use server';
 
-import { resolvePageId } from '@/lib/pages';
-import { findSiteSpaceById } from '@/lib/sites';
+import { type AncestorRevisionPage, resolvePageId } from '@/lib/pages';
+import { findSiteSpaceById, getSiteStructureSections } from '@/lib/sites';
 import { filterOutNullable } from '@/lib/typescript';
 import { getV1BaseContext } from '@/lib/v1';
 import type {
@@ -10,6 +10,7 @@ import type {
     SearchAIRecommendedQuestionStream,
     SearchPageResult,
     SearchSpaceResult,
+    SiteSection,
     Space,
 } from '@gitbook/api';
 import type { GitBookBaseContext, GitBookSiteContext } from '@v2/lib/context';
@@ -48,6 +49,9 @@ export interface ComputedPageResult {
 
     /** When part of a multi-spaces search, the title of the space */
     spaceTitle?: string;
+    section?: SiteSection;
+
+    ancestors: AncestorRevisionPage[];
 }
 
 export interface AskAnswerSource {
@@ -258,15 +262,21 @@ async function searchSiteContent(
     return (
         await Promise.all(
             searchResults.map(async (spaceItem) => {
+                const sections = getSiteStructureSections(structure, { ignoreGroups: true });
                 const siteSpace = findSiteSpaceById(structure, spaceItem.id);
+                const siteSection = sections.find((i) => i.id === siteSpace?.section);
 
                 return Promise.all(
                     spaceItem.pages.map((pageItem) =>
                         transformSitePageResult(context, {
                             pageItem,
                             spaceItem,
-                            space: siteSpace?.space,
+                            space:
+                                !siteSection || siteSection.siteSpaces.length > 1
+                                    ? siteSpace?.space
+                                    : undefined,
                             spaceURL: siteSpace?.urls.published,
+                            siteSection: siteSection ?? undefined,
                         })
                     )
                 );
@@ -348,9 +358,10 @@ async function transformSitePageResult(
         spaceItem: SearchSpaceResult;
         space?: Space;
         spaceURL?: string;
+        siteSection?: SiteSection;
     }
 ): Promise<OrderedComputedResult[]> {
-    const { pageItem, spaceItem, space, spaceURL } = args;
+    const { pageItem, spaceItem, space, spaceURL, siteSection } = args;
     const { linker } = context;
 
     const page: ComputedPageResult = {
@@ -363,9 +374,11 @@ async function transformSitePageResult(
         spaceTitle: space?.title,
         pageId: pageItem.id,
         spaceId: spaceItem.id,
+        section: siteSection,
+        ancestors: [], // @TODO: empty for now until we calculate performantly
     };
 
-    const sections = await Promise.all(
+    const pageSections = await Promise.all(
         pageItem.sections?.map<Promise<ComputedSectionResult>>(async (section) => ({
             type: 'section',
             id: `${page.id}/${section.id}`,
@@ -379,5 +392,5 @@ async function transformSitePageResult(
         })) ?? []
     );
 
-    return [page, ...sections];
+    return [page, ...pageSections];
 }