feat(#114): Complete HeroPlayground with UX polish

DevanshuNEU · DevanshuNEU · commit de9d75a60f48 · 2025-12-28T22:28:30.000-06:00
- Fix Supabase type imports (Session, User → type-only) - Fix ReactFlow type imports (Node, Edge → type-only) - Fix search input disabled bug in demo mode - Add loading spinner with helpful message - Add auto-scroll to results after search - Add 'New Search' back button in results header - Add fade-in animation for results section - Add hover scale effect on result cards - Format search time (3.6s vs 3606ms) - Show query in results header Closes #114
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/components/DependencyGraph.tsx b/frontend/src/components/DependencyGraph.tsx
@@ -1,14 +1,13 @@
 import { useEffect, useState, useCallback } from 'react'
 import ReactFlow, {
-  Node,
-  Edge,
   Controls,
   Background,
   useNodesState,
   useEdgesState,
   MarkerType,
   MiniMap,
 } from 'reactflow'
+import type { Node, Edge } from 'reactflow'
 import dagre from 'dagre'
 import 'reactflow/dist/style.css'
 import { useDependencyGraph } from '../hooks/useCachedQuery'
diff --git a/frontend/src/components/playground/HeroPlayground.tsx b/frontend/src/components/playground/HeroPlayground.tsx
@@ -106,7 +106,33 @@ export function HeroPlayground({
   const showUrlInput = mode === 'custom' && !['indexing', 'ready'].includes(state.status);
   const showValidation = mode === 'custom' && ['validating', 'valid', 'invalid'].includes(state.status);
   const showIndexing = mode === 'custom' && state.status === 'indexing';
-  const showSearch = mode === 'demo' || state.status === 'ready';
+  // Always show search - in custom mode it's disabled until repo is indexed
+  const showSearch = true;
+  const isSearchDisabled = mode === 'custom' && state.status !== 'ready';
+
+  // Get contextual placeholder text
+  const getPlaceholder = () => {
+    if (mode === 'demo') {
+      return "Search for authentication, error handling...";
+    }
+    // Custom mode placeholders based on state
+    switch (state.status) {
+      case 'idle':
+        return "Enter a GitHub URL above to start...";
+      case 'validating':
+        return "Validating repository...";
+      case 'valid':
+        return "Click 'Index Repository' to continue...";
+      case 'invalid':
+        return "Fix the URL above to continue...";
+      case 'indexing':
+        return "Indexing in progress...";
+      case 'ready':
+        return `Search in ${state.repoName}...`;
+      default:
+        return "Enter a GitHub URL to search...";
+    }
+  };
 
   return (
     <div className="w-full max-w-2xl mx-auto">
@@ -205,26 +231,31 @@ export function HeroPlayground({
         <>
           <div className="relative mb-4">
             <div className="absolute inset-0 bg-gradient-to-r from-indigo-500/20 to-cyan-500/20 rounded-2xl blur-xl opacity-50" />
-            <div className="relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-3">
+            <div className={cn(
+              "relative bg-zinc-900/80 rounded-2xl border border-zinc-800 p-3",
+              isSearchDisabled && "opacity-60"
+            )}>
               <form onSubmit={handleSearch} className="flex items-center gap-3">
                 <div className="flex-1 flex items-center gap-3">
                   <div className="text-zinc-500 ml-2"><SearchIcon /></div>
                   <input
                     type="text"
                     value={query}
                     onChange={(e) => setQuery(e.target.value)}
-                    placeholder={mode === 'demo' 
-                      ? "Search for authentication, error handling..." 
-                      : `Search in ${state.status === 'ready' ? state.repoName : 'your repo'}...`
-                    }
+                    placeholder={getPlaceholder()}
                     className="flex-1 bg-transparent text-white placeholder:text-zinc-500 focus:outline-none text-base py-3"
-                    disabled={!canSearch && query.length === 0}
+                    disabled={isSearchDisabled}
                   />
                 </div>
                 <Button
                   type="submit"
-                  disabled={!canSearch || loading}
-                  className="px-6 py-3 h-auto bg-indigo-600 hover:bg-indigo-500 rounded-xl disabled:opacity-50"
+                  disabled={!canSearch || loading || isSearchDisabled}
+                  className={cn(
+                    "px-6 py-3 h-auto rounded-xl transition-all",
+                    canSearch && !loading && !isSearchDisabled
+                      ? "bg-indigo-600 hover:bg-indigo-500 text-white"
+                      : "bg-zinc-700 text-zinc-400 cursor-not-allowed"
+                  )}
                 >
                   {loading ? (
                     <div className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
@@ -1,5 +1,6 @@
 import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import { createClient, SupabaseClient, User, Session } from '@supabase/supabase-js';
+import { createClient } from '@supabase/supabase-js';
+import type { SupabaseClient, User, Session } from '@supabase/supabase-js';
 
 interface AuthContextType {
   user: User | null;
diff --git a/frontend/src/pages/LandingPage.tsx b/frontend/src/pages/LandingPage.tsx
@@ -67,6 +67,7 @@ function AnimatedSection({ children, className = '' }: { children: React.ReactNo
 
 export function LandingPage() {
   const navigate = useNavigate()
+  const resultsRef = useRef<HTMLElement>(null)
   const [results, setResults] = useState<SearchResult[]>([])
   const [loading, setLoading] = useState(false)
   const [searchTime, setSearchTime] = useState<number | null>(null)
@@ -77,6 +78,22 @@ export function LandingPage() {
   const [rateLimitError, setRateLimitError] = useState<string | null>(null)
   const [lastQuery, setLastQuery] = useState('')
 
+  // Scroll to results when they appear
+  const scrollToResults = () => {
+    setTimeout(() => {
+      resultsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    }, 100)
+  }
+
+  // Reset to search state
+  const handleNewSearch = () => {
+    setHasSearched(false)
+    setResults([])
+    setSearchTime(null)
+    setLastQuery('')
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
   // Fetch rate limit status on mount
   useEffect(() => {
     fetch(`${API_URL}/playground/limits`, { credentials: 'include' })
@@ -126,6 +143,8 @@ export function LandingPage() {
         if (typeof data.remaining_searches === 'number') {
           setRemaining(data.remaining_searches)
         }
+        // Scroll to results after they load
+        scrollToResults()
       } else if (data.status === 429) {
         setRateLimitError('Daily limit reached. Sign up for unlimited searches!')
         setRemaining(0)
@@ -199,57 +218,90 @@ export function LandingPage() {
 
       {/* ============ RESULTS SECTION (if searched) ============ */}
       {hasSearched && (
-        <section className="pb-20 px-6">
+        <section ref={resultsRef} className="pb-20 px-6 pt-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
           <div className="max-w-4xl mx-auto">
+            {/* Results Header */}
             <div className="flex items-center justify-between mb-6">
-              <div className="flex items-center gap-4 text-sm">
-                <span className="text-gray-400"><span className="text-white font-semibold">{results.length}</span> results</span>
-                {searchTime && <><span className="text-gray-700">•</span><span className="font-mono text-green-400">{searchTime}ms</span></>}
+              <div className="flex items-center gap-4">
+                <button
+                  onClick={handleNewSearch}
+                  className="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-zinc-800/50 hover:bg-zinc-700/50 border border-zinc-700 text-sm text-zinc-300 hover:text-white transition-all"
+                >
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+                  </svg>
+                  New Search
+                </button>
+                <span className="text-gray-500">|</span>
+                <span className="text-gray-400 text-sm">
+                  <span className="text-white font-semibold">{results.length}</span> results for "<span className="text-blue-400">{lastQuery}</span>"
+                </span>
+                {searchTime && (
+                  <span className="font-mono text-sm text-green-400">
+                    {searchTime > 1000 ? `${(searchTime/1000).toFixed(1)}s` : `${searchTime}ms`}
+                  </span>
+                )}
               </div>
               {remaining > 0 && remaining < limit && (
                 <div className="text-sm text-gray-500">{remaining} remaining</div>
               )}
             </div>
 
-            {(remaining <= 0 || rateLimitError) && (
-              <Card className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 border-blue-500/30 p-6 mb-6">
-                <h3 className="text-lg font-semibold mb-2">You've reached today's limit</h3>
-                <p className="text-gray-300 mb-4">
-                  {rateLimitError || 'Sign up to get unlimited searches and index your own repos.'}
-                </p>
-                <Button onClick={() => navigate('/signup')} className="bg-white text-black hover:bg-gray-100">Get started — it's free</Button>
-              </Card>
+            {/* Loading State */}
+            {loading && (
+              <div className="flex flex-col items-center justify-center py-20">
+                <div className="relative">
+                  <div className="w-12 h-12 border-4 border-zinc-700 border-t-blue-500 rounded-full animate-spin" />
+                </div>
+                <p className="mt-4 text-zinc-400 text-sm">Searching codebase...</p>
+                <p className="text-zinc-600 text-xs mt-1">This may take a few seconds for first search</p>
+              </div>
             )}
 
-            <div className="space-y-4">
-              {results.map((result, idx) => (
-                <Card key={idx} className="bg-[#111113] border-white/5 overflow-hidden hover:border-white/10 transition-all">
-                  <div className="px-5 py-4 border-b border-white/5 flex items-start justify-between">
-                    <div>
-                      <div className="flex items-center gap-3">
-                        <h3 className="font-mono font-semibold">{result.name}</h3>
-                        <Badge variant="outline" className="text-[10px] text-gray-400 border-gray-700">{result.type.replace('_', ' ')}</Badge>
+            {/* Results Content (only when not loading) */}
+            {!loading && (
+              <>
+                {(remaining <= 0 || rateLimitError) && (
+                  <Card className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 border-blue-500/30 p-6 mb-6">
+                    <h3 className="text-lg font-semibold mb-2">You've reached today's limit</h3>
+                    <p className="text-gray-300 mb-4">
+                      {rateLimitError || 'Sign up to get unlimited searches and index your own repos.'}
+                    </p>
+                    <Button onClick={() => navigate('/signup')} className="bg-white text-black hover:bg-gray-100">Get started — it's free</Button>
+                  </Card>
+                )}
+
+                <div className="space-y-4">
+                  {results.map((result, idx) => (
+                    <Card key={idx} className="bg-[#111113] border-white/5 overflow-hidden hover:border-white/10 transition-all hover:scale-[1.01] duration-200">
+                      <div className="px-5 py-4 border-b border-white/5 flex items-start justify-between">
+                        <div>
+                          <div className="flex items-center gap-3">
+                            <h3 className="font-mono font-semibold">{result.name}</h3>
+                            <Badge variant="outline" className="text-[10px] text-gray-400 border-gray-700">{result.type.replace('_', ' ')}</Badge>
+                          </div>
+                          <p className="text-sm text-gray-500 font-mono mt-1">{result.file_path.split('/').slice(-2).join('/')}</p>
+                        </div>
+                        <div className="text-right">
+                          <div className="text-2xl font-bold text-blue-400">{(result.score * 100).toFixed(0)}%</div>
+                          <div className="text-[10px] text-gray-500 uppercase tracking-wider">match</div>
+                        </div>
                       </div>
-                      <p className="text-sm text-gray-500 font-mono mt-1">{result.file_path.split('/').slice(-2).join('/')}</p>
-                    </div>
-                    <div className="text-right">
-                      <div className="text-2xl font-bold text-blue-400">{(result.score * 100).toFixed(0)}%</div>
-                      <div className="text-[10px] text-gray-500 uppercase tracking-wider">match</div>
-                    </div>
-                  </div>
-                  <SyntaxHighlighter language={result.language || 'python'} style={oneDark} customStyle={{ margin: 0, borderRadius: 0, fontSize: '0.8rem', background: '#0d0d0f' }} showLineNumbers startingLineNumber={result.line_start || 1}>
-                    {result.code}
-                  </SyntaxHighlighter>
-                </Card>
-              ))}
-            </div>
+                      <SyntaxHighlighter language={result.language || 'python'} style={oneDark} customStyle={{ margin: 0, borderRadius: 0, fontSize: '0.8rem', background: '#0d0d0f' }} showLineNumbers startingLineNumber={result.line_start || 1}>
+                        {result.code}
+                      </SyntaxHighlighter>
+                    </Card>
+                  ))}
+                </div>
 
-            {results.length === 0 && !loading && (
-              <div className="text-center py-16">
-                <div className="text-5xl mb-4">🔍</div>
-                <h3 className="text-lg font-semibold mb-2">No results found</h3>
-                <p className="text-gray-500">Try a different query</p>
-              </div>
+                {results.length === 0 && (
+                  <div className="text-center py-16">
+                    <div className="text-5xl mb-4">🔍</div>
+                    <h3 className="text-lg font-semibold mb-2">No results found</h3>
+                    <p className="text-gray-500">Try a different query</p>
+                  </div>
+                )}
+              </>
             )}
           </div>
         </section>
