@nextclaw/ui 0.3.16 → 0.3.17

package/src/components/doc-browser/DocBrowserContext.tsx

@@ -0,0 +1,134 @@
+import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
+
+const DOCS_PRIMARY_DOMAIN = 'docs.nextclaw.io';
+const DOCS_FALLBACK_DOMAIN = 'nextclaw-docs.pages.dev';
+const DOCS_HOSTS = new Set([
+    DOCS_PRIMARY_DOMAIN,
+    `www.${DOCS_PRIMARY_DOMAIN}`,
+    DOCS_FALLBACK_DOMAIN,
+    `www.${DOCS_FALLBACK_DOMAIN}`,
+]);
+
+export const DOCS_DEFAULT_BASE_URL = `https://${DOCS_FALLBACK_DOMAIN}`;
+
+export type DocBrowserMode = 'floating' | 'docked';
+
+interface DocBrowserState {
+    isOpen: boolean;
+    mode: DocBrowserMode;
+    currentUrl: string;
+    history: string[];
+    historyIndex: number;
+}
+
+interface DocBrowserActions {
+    open: (url?: string) => void;
+    close: () => void;
+    toggleMode: () => void;
+    setMode: (mode: DocBrowserMode) => void;
+    navigate: (url: string) => void;
+    goBack: () => void;
+    goForward: () => void;
+    canGoBack: boolean;
+    canGoForward: boolean;
+}
+
+type DocBrowserContextValue = DocBrowserState & DocBrowserActions;
+
+const DocBrowserContext = createContext<DocBrowserContextValue | null>(null);
+
+export function useDocBrowser(): DocBrowserContextValue {
+    const ctx = useContext(DocBrowserContext);
+    if (!ctx) throw new Error('useDocBrowser must be used within DocBrowserProvider');
+    return ctx;
+}
+
+/** Check if a URL belongs to the docs domain */
+export function isDocsUrl(url: string): boolean {
+    try {
+        const parsed = new URL(url, window.location.origin);
+        return DOCS_HOSTS.has(parsed.hostname);
+    } catch {
+        return false;
+    }
+}
+
+export function DocBrowserProvider({ children }: { children: ReactNode }) {
+    const [state, setState] = useState<DocBrowserState>({
+        isOpen: false,
+        mode: 'docked',
+        currentUrl: `${DOCS_DEFAULT_BASE_URL}/guide/getting-started`,
+        history: [`${DOCS_DEFAULT_BASE_URL}/guide/getting-started`],
+        historyIndex: 0,
+    });
+
+    const open = useCallback((url?: string) => {
+        const targetUrl = url || state.currentUrl || `${DOCS_DEFAULT_BASE_URL}/guide/getting-started`;
+        setState(prev => ({
+            ...prev,
+            isOpen: true,
+            currentUrl: targetUrl,
+            history: [...prev.history.slice(0, prev.historyIndex + 1), targetUrl],
+            historyIndex: prev.historyIndex + 1,
+        }));
+    }, [state.currentUrl]);
+
+    const close = useCallback(() => {
+        setState(prev => ({ ...prev, isOpen: false }));
+    }, []);
+
+    const toggleMode = useCallback(() => {
+        setState(prev => ({ ...prev, mode: prev.mode === 'floating' ? 'docked' : 'floating' }));
+    }, []);
+
+    const setMode = useCallback((mode: DocBrowserMode) => {
+        setState(prev => ({ ...prev, mode }));
+    }, []);
+
+    const navigate = useCallback((url: string) => {
+        setState(prev => ({
+            ...prev,
+            currentUrl: url,
+            history: [...prev.history.slice(0, prev.historyIndex + 1), url],
+            historyIndex: prev.historyIndex + 1,
+        }));
+    }, []);
+
+    const goBack = useCallback(() => {
+        setState(prev => {
+            if (prev.historyIndex <= 0) return prev;
+            const newIndex = prev.historyIndex - 1;
+            return { ...prev, historyIndex: newIndex, currentUrl: prev.history[newIndex] };
+        });
+    }, []);
+
+    const goForward = useCallback(() => {
+        setState(prev => {
+            if (prev.historyIndex >= prev.history.length - 1) return prev;
+            const newIndex = prev.historyIndex + 1;
+            return { ...prev, historyIndex: newIndex, currentUrl: prev.history[newIndex] };
+        });
+    }, []);
+
+    const canGoBack = state.historyIndex > 0;
+    const canGoForward = state.historyIndex < state.history.length - 1;
+
+    const value = useMemo<DocBrowserContextValue>(() => ({
+        ...state,
+        open,
+        close,
+        toggleMode,
+        setMode,
+        navigate,
+        goBack,
+        goForward,
+        canGoBack,
+        canGoForward,
+    }), [state, open, close, toggleMode, setMode, navigate, goBack, goForward, canGoBack, canGoForward]);
+
+    return (
+        <DocBrowserContext.Provider value={value}>
+            {children}
+        </DocBrowserContext.Provider>
+    );
+}

package/src/components/doc-browser/index.ts

@@ -0,0 +1,3 @@
+export { DocBrowser } from './DocBrowser';
+export { DocBrowserProvider, useDocBrowser, isDocsUrl } from './DocBrowserContext';
+export { useDocLinkInterceptor } from './useDocLinkInterceptor';

package/src/components/doc-browser/useDocLinkInterceptor.ts

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+import { isDocsUrl, useDocBrowser } from './DocBrowserContext';
+
+/**
+ * Global click interceptor for docs links.
+ * Captures clicks on <a> tags pointing to the docs domain
+ * and opens them in the in-app micro-browser instead.
+ */
+export function useDocLinkInterceptor() {
+    const docBrowser = useDocBrowser();
+
+    useEffect(() => {
+        const handler = (e: MouseEvent) => {
+            // Walk up from the click target to find an anchor
+            const anchor = (e.target as HTMLElement).closest<HTMLAnchorElement>('a[href]');
+            if (!anchor) return;
+
+            const href = anchor.getAttribute('href') || '';
+            if (!isDocsUrl(href)) return;
+
+            // Don't intercept if modifier keys are held (user wants new tab behavior)
+            if (e.ctrlKey || e.metaKey || e.shiftKey) return;
+
+            e.preventDefault();
+            e.stopPropagation();
+            docBrowser.open(href);
+        };
+
+        // Use capture phase to intercept before React's synthetic events
+        document.addEventListener('click', handler, true);
+        return () => document.removeEventListener('click', handler, true);
+    }, [docBrowser]);
+}

package/src/components/layout/AppLayout.tsx

@@ -1,20 +1,37 @@
 import { Sidebar } from './Sidebar';
+import { DocBrowserProvider, DocBrowser, useDocBrowser, useDocLinkInterceptor } from '@/components/doc-browser';
 
 interface AppLayoutProps {
   children: React.ReactNode;
 }
 
-export function AppLayout({ children }: AppLayoutProps) {
+function AppLayoutInner({ children }: AppLayoutProps) {
+  const { isOpen, mode } = useDocBrowser();
+  useDocLinkInterceptor();
+
   return (
-    <div className="h-screen flex bg-[hsl(40,20%,98%)] p-2">
+    <div className="h-screen flex bg-white font-sans text-foreground">
       <Sidebar />
-      <div className="flex-1 flex flex-col min-w-0 bg-white rounded-[2rem] shadow-sm overflow-hidden border border-[hsl(40,10%,94%)]">
-        <main className="flex-1 overflow-auto custom-scrollbar p-8">
-          <div className="max-w-6xl mx-auto animate-fade-in h-full">
-            {children}
-          </div>
-        </main>
+      <div className="flex-1 flex min-w-0 overflow-hidden relative">
+        <div className="flex-1 flex flex-col min-w-0 bg-gray-50 overflow-hidden">
+          <main className="flex-1 overflow-auto custom-scrollbar p-10">
+            <div className="max-w-6xl mx-auto animate-fade-in h-full">
+              {children}
+            </div>
+          </main>
+        </div>
+        {/* Doc Browser: docked mode renders inline, floating mode renders as overlay */}
+        {isOpen && mode === 'docked' && <DocBrowser />}
       </div>
+      {isOpen && mode === 'floating' && <DocBrowser />}
     </div>
   );
 }
+
+export function AppLayout({ children }: AppLayoutProps) {
+  return (
+    <DocBrowserProvider>
+      <AppLayoutInner>{children}</AppLayoutInner>
+    </DocBrowserProvider>
+  );
+}

package/src/components/layout/Sidebar.tsx

@@ -1,7 +1,8 @@
 import { cn } from '@/lib/utils';
 import { t } from '@/lib/i18n';
-import { Cpu, GitBranch, History, MessageSquare, Sparkles } from 'lucide-react';
+import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Store } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
+import { useDocBrowser } from '@/components/doc-browser';
 
 const navItems = [
   {
@@ -28,12 +29,19 @@ const navItems = [
     target: '/sessions',
     label: t('sessions'),
     icon: History,
+  },
+  {
+    target: '/marketplace',
+    label: 'Marketplace',
+    icon: Store,
   }
 ];
 
 export function Sidebar() {
+  const docBrowser = useDocBrowser();
+
   return (
-    <aside className="w-[240px] bg-transparent flex flex-col h-full py-6 px-4">
+    <aside className="w-[240px] bg-white border-r border-gray-200 flex flex-col h-full py-6 px-4">
       {/* Logo Area */}
       <div className="px-3 mb-8">
         <div className="flex items-center gap-2.5 group cursor-pointer">
@@ -55,10 +63,10 @@ export function Sidebar() {
                 <NavLink
                   to={item.target}
                   className={({ isActive }) => cn(
-                    'group w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm font-medium transition-all duration-fast',
+                    'group w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-base',
                     isActive
-                      ? 'bg-primary-100 text-primary-700'
-                      : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+                      ? 'bg-brand-50 text-brand-700'
+                      : 'text-gray-600 hover:bg-gray-100/80 hover:text-gray-900'
                   )}
                 >
                   {({ isActive }) => (
@@ -76,6 +84,25 @@ export function Sidebar() {
           })}
         </ul>
       </nav>
+
+      {/* Help Button */}
+      <div className="pt-2 border-t border-gray-100 mt-2">
+        <button
+          onClick={() => docBrowser.open()}
+          className={cn(
+            'w-full flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm font-medium transition-all duration-base',
+            docBrowser.isOpen
+              ? 'bg-brand-50 text-brand-700'
+              : 'text-gray-600 hover:bg-gray-100/80 hover:text-gray-900'
+          )}
+        >
+          <BookOpen className={cn(
+            'h-4 w-4',
+            docBrowser.isOpen ? 'text-primary' : 'text-gray-500'
+          )} />
+          <span className="flex-1 text-left">{t('docBrowserHelp')}</span>
+        </button>
+      </div>
     </aside>
   );
 }