boltdocs 2.6.2 → 2.7.0

package/src/client/components/ui-base/not-found.tsx

@@ -3,20 +3,22 @@ import { Link } from '../primitives/link'
 
 export function NotFound() {
   return (
-    <div className="flex items-center justify-center min-h-[60vh] text-center">
-      <div className="space-y-4">
-        <span className="text-8xl font-black tracking-tighter text-primary-500/20">
+    <div className="flex items-center justify-center min-h-[65vh] text-center px-4">
+      <div className="space-y-6 max-w-md mx-auto p-8 border border-subtle bg-surface rounded-2xl shadow-xs">
+        <span className="block text-7xl font-extrabold tracking-tight text-primary-500">
           404
         </span>
-        <h1 className="text-2xl font-bold text-text-main">Page Not Found</h1>
-        <p className="text-sm text-text-muted max-w-sm mx-auto">
-          The page you're looking for doesn't exist or has been moved.
-        </p>
+        <div className="space-y-2">
+          <h1 className="text-xl font-bold text-body">Page Not Found</h1>
+          <p className="text-sm text-muted leading-relaxed">
+            The page you're looking for doesn't exist or has been moved.
+          </p>
+        </div>
         <Link
           href="/"
-          className="inline-flex items-center gap-2 rounded-lg bg-primary-500 px-5 py-2.5 text-sm font-semibold text-white outline-none transition-all hover:brightness-110 hover:shadow-lg focus-visible:ring-2 focus-visible:ring-primary-500/30"
+          className="inline-flex items-center gap-2 rounded-xl border border-subtle bg-main px-6 py-2.5 text-xs font-semibold text-body hover:bg-primary-50/50 hover:border-primary-500/50 transition-all duration-300 outline-none select-none"
         >
-          <ArrowLeft size={16} /> Go to Home
+          <ArrowLeft size={14} /> Go to Home
         </Link>
       </div>
     </div>

package/src/client/components/ui-base/on-this-page.tsx

@@ -1,123 +1,27 @@
-import {
-  OnThisPage as OTP,
-  AnchorProvider,
-  ScrollProvider,
-  useActiveAnchor,
-} from '../primitives/on-this-page'
-import { useRef, useEffect, useState, useCallback, useMemo } from 'react'
-import { useOnThisPage } from '../../hooks/use-onthispage'
+import { OnThisPage as OTP } from '../primitives/on-this-page'
 import type { OnThisPageProps } from '../../types'
 import { Pencil, CircleHelp, TextAlignStart } from 'lucide-react'
 
 export function OnThisPage({
-  headings: rawHeadings = [],
+  headings = [],
   editLink,
   communityHelp,
   filePath,
 }: OnThisPageProps) {
-  const { headings } = useOnThisPage(rawHeadings)
-
-  const toc = useMemo(
-    () =>
-      headings.map((h) => ({ title: h.text, url: `#${h.id}`, depth: h.level })),
-    [headings],
-  )
-
   if (headings.length === 0) return null
 
-  return (
-    <AnchorProvider toc={toc}>
-      <OnThisPageInner
-        headings={headings}
-        editLink={editLink}
-        communityHelp={communityHelp}
-        filePath={filePath}
-      />
-    </AnchorProvider>
-  )
-}
-
-function OnThisPageInner({
-  headings,
-  editLink,
-  communityHelp,
-  filePath,
-}: OnThisPageProps & {
-  headings: { level: number; text: string; id: string }[]
-}) {
-  const activeId = useActiveAnchor()
-  const [indicatorStyle, setIndicatorStyle] = useState<React.CSSProperties>({
-    opacity: 0,
-  })
-  const listRef = useRef<HTMLUListElement>(null)
-  const scrollContainerRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    if (!activeId || !listRef.current) return
-
-    const activeLink = listRef.current.querySelector(
-      `a[href="#${activeId}"]`,
-    ) as HTMLElement
-
-    if (activeLink) {
-      setIndicatorStyle({
-        transform: `translateY(${activeLink.offsetTop}px)`,
-        height: `${activeLink.offsetHeight}px`,
-        opacity: 1,
-      })
-    }
-  }, [activeId])
-
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLAnchorElement>, id: string) => {
-      e.preventDefault()
-      const el = document.getElementById(id)
-
-      if (el) {
-        el.scrollIntoView({ behavior: 'smooth' })
-        window.history.pushState(null, '', `#${id}`)
-      }
-    },
-    [],
-  )
-
   return (
     <OTP.Root>
       <OTP.Header className="flex flex-row gap-x-2">
         <TextAlignStart size={16} />
         On this page
       </OTP.Header>
-      <ScrollProvider containerRef={scrollContainerRef}>
-        <OTP.Content
-          className="max-h-[450px] boltdocs-otp-scroll-area"
-          ref={scrollContainerRef}
-        >
-          <OTP.Indicator style={indicatorStyle} />
-          <ul
-            className="relative space-y-2 border-l border-border-subtle"
-            ref={listRef}
-          >
-            {headings.map((h) => (
-              <OTP.Item key={h.id} level={h.level}>
-                <OTP.Link
-                  href={`#${h.id}`}
-                  active={activeId === h.id}
-                  onClick={(e) => handleClick(e, h.id)}
-                  className="pl-4"
-                >
-                  {h.text}
-                </OTP.Link>
-              </OTP.Item>
-            ))}
-          </ul>
-        </OTP.Content>
-      </ScrollProvider>
+
+      <OTP.Tree headings={headings} />
 
       {(editLink || communityHelp) && (
-        <div className="mt-8 pt-8 border-t border-border-subtle space-y-4">
-          <p className="text-xs font-bold uppercase text-text-main">
-            Need help?
-          </p>
+        <div className="mt-8 pt-8 border-t border-subtle space-y-4">
+          <p className="text-xs font-bold text-body">Need help?</p>
           <ul className="space-y-3">
             {editLink && filePath && (
               <li>
@@ -125,7 +29,7 @@ function OnThisPageInner({
                   href={editLink.replace(':path', filePath)}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-2 text-sm text-text-muted hover:text-text-main transition-colors"
+                  className="flex items-center gap-2 text-sm text-muted hover:text-body transition-colors"
                 >
                   <Pencil size={16} />
                   Edit this page
@@ -138,7 +42,7 @@ function OnThisPageInner({
                   href={communityHelp}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="flex items-center gap-2 text-sm text-text-muted hover:text-text-main transition-colors"
+                  className="flex items-center gap-2 text-sm text-muted hover:text-body transition-colors"
                 >
                   <CircleHelp size={16} />
                   Community help

package/src/client/components/ui-base/page-nav.tsx

@@ -3,7 +3,7 @@ import { PageNav as PageNavPrimitive } from '../primitives/page-nav'
 
 /**
  * Component to display the previous and next page navigation buttons.
- * Enhanced with subtle entrance animations and a modern card layout.
+ * Enhanced with subtle entrance animations, modern card layout, and hover highlights.
  */
 export function PageNav() {
   const { prevPage, nextPage } = usePageNav()
@@ -11,11 +11,17 @@ export function PageNav() {
   if (!prevPage && !nextPage) return null
 
   return (
-    <PageNavPrimitive.Root className="animate-in fade-in slide-in-from-bottom-4 duration-700">
+    <PageNavPrimitive.Root className="pt-8 border-t border-subtle grid sm:grid-cols-2 gap-4 animate-in fade-in slide-in-from-bottom-4 duration-700 select-none">
       {prevPage ? (
-        <PageNavPrimitive.Link to={prevPage.path} direction="prev">
-          <PageNavPrimitive.Title>Previous</PageNavPrimitive.Title>
-          <PageNavPrimitive.Description>
+        <PageNavPrimitive.Link
+          to={prevPage.path}
+          direction="prev"
+          className="group border border-subtle bg-surface p-5 rounded-2xl transition-all duration-300 hover:border-primary-500/50 hover:bg-primary-50/20"
+        >
+          <PageNavPrimitive.Title className="text-xs font-bold uppercase tracking-wider text-muted/60 mb-1">
+            Previous
+          </PageNavPrimitive.Title>
+          <PageNavPrimitive.Description className="text-sm sm:text-base font-bold text-body group-hover:text-primary-500 transition-colors">
             {prevPage.title}
           </PageNavPrimitive.Description>
         </PageNavPrimitive.Link>
@@ -23,13 +29,21 @@ export function PageNav() {
         <div />
       )}
 
-      {nextPage && (
-        <PageNavPrimitive.Link to={nextPage.path} direction="next">
-          <PageNavPrimitive.Title>Next</PageNavPrimitive.Title>
-          <PageNavPrimitive.Description>
+      {nextPage ? (
+        <PageNavPrimitive.Link
+          to={nextPage.path}
+          direction="next"
+          className="group border border-subtle bg-surface p-5 rounded-2xl transition-all duration-300 hover:border-primary-500/50 hover:bg-primary-50/20"
+        >
+          <PageNavPrimitive.Title className="text-xs font-bold uppercase tracking-wider text-muted/60 mb-1">
+            Next
+          </PageNavPrimitive.Title>
+          <PageNavPrimitive.Description className="text-sm sm:text-base font-bold text-body group-hover:text-primary-500 transition-colors">
             {nextPage.title}
           </PageNavPrimitive.Description>
         </PageNavPrimitive.Link>
+      ) : (
+        <div />
       )}
     </PageNavPrimitive.Root>
   )

package/src/client/components/ui-base/search-dialog.tsx

@@ -1,9 +1,11 @@
 import { useEffect, useCallback } from 'react'
+import { Search } from 'lucide-react'
 import { useSearch } from '../../hooks/use-search'
 import { SearchDialog as SearchDialogPrimitive } from '../primitives/search-dialog'
 import Navbar from '../primitives/navbar'
 import { useNavigate } from 'react-router-dom'
 import type { ComponentRoute } from '../../types'
+
 interface SearchResult {
   id: string
   title: string
@@ -13,6 +15,29 @@ interface SearchResult {
   isHeading?: boolean
 }
 
+function Highlight({ text, query }: { text: string; query: string }) {
+  if (!query || !text) return <>{text}</>
+  const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+  const regex = new RegExp(`(${escapedQuery})`, 'gi')
+  const parts = text.split(regex)
+  return (
+    <>
+      {parts.map((part, i) =>
+        regex.test(part) ? (
+          <mark
+            key={i}
+            className="bg-primary-500/20 text-primary-600 dark:text-primary-400 font-bold px-0.5 rounded-sm"
+          >
+            {part}
+          </mark>
+        ) : (
+          part
+        ),
+      )}
+    </>
+  )
+}
+
 export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
   const { isOpen, setIsOpen, query, setQuery, list } = useSearch(routes)
   const navigate = useNavigate()
@@ -36,53 +61,103 @@ export function SearchDialog({ routes }: { routes: ComponentRoute[] }) {
       const path = String(key)
       setIsOpen(false)
 
-      if (path.includes('#')) {
-        const [p, id] = path.split('#')
-        navigate(p)
+      const [baseUrl, hash] = path.split('#')
+      const search = query ? `?hl=${encodeURIComponent(query)}` : ''
+      const finalPath = `${baseUrl}${search}${hash ? `#${hash}` : ''}`
+
+      navigate(finalPath)
+
+      if (hash) {
         setTimeout(() => {
-          const el = document.getElementById(id)
+          const el = document.getElementById(hash)
           if (el) el.scrollIntoView({ behavior: 'smooth' })
         }, 100)
-      } else {
-        navigate(path)
       }
     },
-    [navigate, setIsOpen],
+    [navigate, setIsOpen, query],
   )
 
   return (
     <>
-      <Navbar.SearchTrigger onPress={() => setIsOpen(true)} />
+      <Navbar.SearchTrigger.Desktop
+        onPress={() => setIsOpen(true)}
+        className="rounded-xl border border-subtle bg-surface text-muted transition-all duration-200 hover:border-primary-500/50 hover:text-body hover:bg-soft/50 hover:shadow-sm active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-primary-500/30"
+      >
+        <div className="flex items-center gap-2">
+          <Search size={16} />
+          <span className="hidden sm:inline-block">Search docs...</span>
+        </div>
+        <Navbar.SearchTrigger.Kbd className="[&_kbd]:bg-main [&_kbd]:border [&_kbd]:border-subtle [&_kbd]:rounded [&_kbd]:px-1.5 [&_kbd]:h-5 [&_kbd]:w-5" />
+      </Navbar.SearchTrigger.Desktop>
 
-      <SearchDialogPrimitive.Root isOpen={isOpen} onOpenChange={setIsOpen}>
-        <SearchDialogPrimitive.Autocomplete onSelectionChange={handleSelect}>
-          <SearchDialogPrimitive.Input
-            value={query}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setQuery(e.target.value)
-            }
-          />
-          <SearchDialogPrimitive.List items={list as SearchResult[]}>
-            {(item: SearchResult) => (
-              <SearchDialogPrimitive.Item
-                key={item.id}
-                onPress={() => handleSelect(item.id)}
-                textValue={item.title}
+      <Navbar.SearchTrigger.Mobile
+        onPress={() => setIsOpen(true)}
+        className="rounded-xl text-muted transition-all duration-200 hover:text-body active:scale-95 focus-visible:ring-2 focus-visible:ring-primary-500/30"
+      >
+        <Search size={20} />
+      </Navbar.SearchTrigger.Mobile>
+
+      <SearchDialogPrimitive.Overlay
+        isOpen={isOpen}
+        isDismissable
+        onOpenChange={() => setIsOpen(false)}
+        className="fixed inset-0 z-100 flex items-center justify-center p-4 bg-black/40 backdrop-blur-xs animate-fade-in"
+      >
+        <SearchDialogPrimitive.Content className="w-full max-w-lg bg-main border border-subtle shadow-md rounded-2xl overflow-hidden p-6">
+          <SearchDialogPrimitive.Dialog
+            aria-label="Search documentation"
+            className="flex flex-col min-h-0 h-[450px]"
+          >
+            <SearchDialogPrimitive.Autocomplete
+              onSelectionChange={handleSelect}
+              className="flex flex-col min-h-0"
+            >
+              <SearchDialogPrimitive.Input
+                value={query}
+                onChange={setQuery}
+                className="flex items-center gap-2 border border-subtle bg-surface px-4 py-2.5 rounded-xl focus-within:border-primary-500 mb-4"
               >
-                <SearchDialogPrimitive.Item.Icon isHeading={item.isHeading} />
-                <div className="flex flex-col justify-center gap-0.5">
-                  <SearchDialogPrimitive.Item.Title>
-                    {item.title}
-                  </SearchDialogPrimitive.Item.Title>
-                  <SearchDialogPrimitive.Item.Bio>
-                    {item.bio}
-                  </SearchDialogPrimitive.Item.Bio>
-                </div>
-              </SearchDialogPrimitive.Item>
-            )}
-          </SearchDialogPrimitive.List>
-        </SearchDialogPrimitive.Autocomplete>
-      </SearchDialogPrimitive.Root>
+                <SearchDialogPrimitive.Input.SearchInput
+                  placeholder="Search documentation..."
+                  className="w-full bg-transparent outline-none text-body text-sm"
+                />
+                {query && (
+                  <SearchDialogPrimitive.Input.Button
+                    onPress={() => setQuery('')}
+                    className="text-muted hover:text-body text-xs cursor-pointer select-none"
+                  >
+                    ✕
+                  </SearchDialogPrimitive.Input.Button>
+                )}
+              </SearchDialogPrimitive.Input>
+
+              <SearchDialogPrimitive.List items={list as SearchResult[]}>
+                {(item: SearchResult) => (
+                  <SearchDialogPrimitive.Item
+                    key={item.id}
+                    onPress={() => handleSelect(item.id)}
+                    textValue={item.title}
+                    className="flex items-center gap-3 px-4 py-2 rounded-xl group dark:hover:bg-primary-300/40 hover:bg-primary-200/50 transition-colors duration-100"
+                  >
+                    <SearchDialogPrimitive.Item.Icon
+                      isHeading={item.isHeading}
+                      className="text-muted group-hover:text-primary-500 group-focus:text-primary-500"
+                    />
+                    <div className="flex flex-col justify-center min-w-0">
+                      <SearchDialogPrimitive.Item.Title className="text-sm font-medium text-body truncate dark:group-hover:text-primary-100">
+                        <Highlight text={item.title} query={query} />
+                      </SearchDialogPrimitive.Item.Title>
+                      <SearchDialogPrimitive.Item.Bio className="text-xs text-muted truncate">
+                        <Highlight text={item.bio} query={query} />
+                      </SearchDialogPrimitive.Item.Bio>
+                    </div>
+                  </SearchDialogPrimitive.Item>
+                )}
+              </SearchDialogPrimitive.List>
+            </SearchDialogPrimitive.Autocomplete>
+          </SearchDialogPrimitive.Dialog>
+        </SearchDialogPrimitive.Content>
+      </SearchDialogPrimitive.Overlay>
     </>
   )
 }

package/src/client/components/ui-base/search-highlight.tsx

@@ -0,0 +1,10 @@
+import { useSearchHighlight } from '../../hooks/use-search-highlight'
+
+/**
+ * Component that enables search term highlighting on the page.
+ * It doesn't render anything visible.
+ */
+export function SearchHighlight() {
+  useSearchHighlight('.boltdocs-page')
+  return null
+}