Fix search overlay, callout colors, and implement tabbed interface

- Remove hashtag bullets and double search icon from search overlay
- Fix search input border visibility with explicit HSL colors
- Left align search results and meta text
- Remove hover effects and bottom borders from search results
- Add breadcrumb separator (›) between page and section names
- Color callout text to match old site (blue for info, golden for warnings, etc.)
- Fix syntax errors in user-guide.mdx by closing code blocks
- Add text wrapping to code blocks to prevent copy button collision
- Add proper margins to Steps components and h4 headings
- Remove underlines from Card component links
- Fix CodeGroup component black box issue with light/dark mode support
- Implement interactive tabbed interface for System Architecture section
- Add Pagefind search integration with custom styling

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: groksrc

astro.config.mjs

@@ -3,10 +3,11 @@ import { defineConfig } from 'astro/config';
 
 import mdx from '@astrojs/mdx';
 import react from '@astrojs/react';
+import pagefind from 'astro-pagefind';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [mdx(), react()],
+  integrations: [mdx(), react(), pagefind()],
   markdown: {
     syntaxHighlight: 'shiki',
     shikiConfig: {

package-lock.json

@@ -14,6 +14,7 @@
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
     "astro": "^5.11.0",
+    "astro-pagefind": "^1.8.3",
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",

package.json

@@ -11,22 +11,26 @@ const calloutStyles = {
   info: {
     container: 'border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-950/20',
     icon: 'text-blue-600 dark:text-blue-400',
-    title: 'text-blue-900 dark:text-blue-300'
+    title: 'text-blue-900 dark:text-blue-300',
+    content: '!text-blue-600 dark:!text-blue-400 [&_p]:!text-blue-600 dark:[&_p]:!text-blue-400 [&_li]:!text-blue-600 dark:[&_li]:!text-blue-400 [&_strong]:!text-blue-700 dark:[&_strong]:!text-blue-300 [&_code]:!text-blue-700 dark:[&_code]:!text-blue-300'
   },
   warning: {
     container: 'border-yellow-200 bg-yellow-50 dark:border-yellow-900 dark:bg-yellow-950/20',
     icon: 'text-yellow-600 dark:text-yellow-400',
-    title: 'text-yellow-900 dark:text-yellow-300'
+    title: 'text-yellow-900 dark:text-yellow-300',
+    content: '!text-yellow-600 dark:!text-yellow-400 [&_p]:!text-yellow-600 dark:[&_p]:!text-yellow-400 [&_li]:!text-yellow-600 dark:[&_li]:!text-yellow-400 [&_strong]:!text-yellow-700 dark:[&_strong]:!text-yellow-300 [&_code]:!text-yellow-700 dark:[&_code]:!text-yellow-300'
   },
   note: {
     container: 'border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950/20',
     icon: 'text-gray-600 dark:text-gray-400',
-    title: 'text-gray-900 dark:text-gray-300'
+    title: 'text-gray-900 dark:text-gray-300',
+    content: '!text-gray-600 dark:!text-gray-400 [&_p]:!text-gray-600 dark:[&_p]:!text-gray-400 [&_li]:!text-gray-600 dark:[&_li]:!text-gray-400 [&_strong]:!text-gray-700 dark:[&_strong]:!text-gray-300 [&_code]:!text-gray-700 dark:[&_code]:!text-gray-300'
   },
   tip: {
     container: 'border-green-200 bg-green-50 dark:border-green-900 dark:bg-green-950/20',
     icon: 'text-green-600 dark:text-green-400',
-    title: 'text-green-900 dark:text-green-300'
+    title: 'text-green-900 dark:text-green-300',
+    content: '!text-green-600 dark:!text-green-400 [&_p]:!text-green-600 dark:[&_p]:!text-green-400 [&_li]:!text-green-600 dark:[&_li]:!text-green-400 [&_strong]:!text-green-700 dark:[&_strong]:!text-green-300 [&_code]:!text-green-700 dark:[&_code]:!text-green-300'
   }
 }
 
@@ -81,7 +85,7 @@ export default function Callout({ children, type = 'note', title, className }: C
               {title || defaultTitle}
             </div>
           )}
-          <div className="text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0">
+          <div className={cn("text-sm [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", styles.content)}>
             {children}
           </div>
         </div>

src/components/Callout.tsx

@@ -1,9 +1,9 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import { cn } from '@/lib/utils'
 
-interface CodeTab {
+interface CodeTabProps {
   label: string
-  value: string
+  value?: string
   language?: string
   children: React.ReactNode
 }
@@ -13,48 +13,63 @@ interface CodeGroupProps {
   className?: string
 }
 
+export function CodeTab({ children }: CodeTabProps) {
+  return <>{children}</>
+}
+
 export default function CodeGroup({ children, className }: CodeGroupProps) {
   const [activeTab, setActiveTab] = useState(0)
+  const childArray = React.Children.toArray(children)
+  
+  // Extract labels from CodeTab components
+  const tabs: { label: string; content: React.ReactNode }[] = []
+  
+  childArray.forEach(child => {
+    if (React.isValidElement(child) && child.props.label) {
+      tabs.push({
+        label: child.props.label,
+        content: child.props.children
+      })
+    }
+  })
+  
+  if (tabs.length === 0) {
+    return null
+  }
 
-  const tabs = Array.isArray(children) ? children : [children]
-  const validTabs = tabs.filter(tab => 
-    tab && typeof tab === 'object' && 'props' in tab && tab.props
-  )
-
-  if (validTabs.length === 0) return null
-
   return (
-    <div className={cn('my-6 overflow-hidden rounded-lg border bg-gray-900', className)}>
-      <div className="flex border-b border-gray-800 bg-gray-950">
-        {validTabs.map((tab, index) => {
-          const { label, value } = tab.props
-          return (
-            <button
-              key={value || index}
-              onClick={() => setActiveTab(index)}
-              className={cn(
-                'px-4 py-2 text-sm font-medium transition-colors',
-                activeTab === index
-                  ? 'border-b-2 border-primary bg-gray-900 text-gray-100'
-                  : 'text-gray-400 hover:text-gray-200'
-              )}
-            >
-              {label}
-            </button>
-          )
-        })}
+    <div className={cn('my-6 overflow-hidden rounded-lg border border-gray-200 dark:border-gray-800', className)}>
+      <div className="flex border-b border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950">
+        {tabs.map((tab, index) => (
+          <button
+            key={index}
+            onClick={() => setActiveTab(index)}
+            className={cn(
+              'px-4 py-2 text-sm font-medium transition-colors',
+              activeTab === index
+                ? 'border-b-2 border-primary bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100'
+                : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'
+            )}
+          >
+            {tab.label}
+          </button>
+        ))}
       </div>
-      <div className="p-4">
-        {validTabs[activeTab] && (
-          <div className="text-sm text-gray-100">
-            {validTabs[activeTab].props.children}
+      <div className="bg-white dark:bg-gray-900">
+        {tabs.map((tab, index) => (
+          <div
+            key={index}
+            className={cn(
+              'p-4',
+              activeTab === index ? 'block' : 'hidden'
+            )}
+          >
+            <div className="prose prose-sm dark:prose-invert max-w-none">
+              {tab.content}
+            </div>
           </div>
-        )}
+        ))}
       </div>
     </div>
   )
-}
-
-export function CodeTab({ children }: CodeTab) {
-  return <>{children}</>
 }