Merge pull request #41 from DevanshuNEU/feature/keyboard-shortcuts-polish

feat(frontend): Keyboard Shortcuts + Polish + Caching (#36)

Author: DevanshuNEU

frontend/package-lock.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-progress": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@supabase/supabase-js": "^2.39.0",
+    "@tanstack/react-query": "^5.90.12",
     "@types/dagre": "^0.7.53",
     "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.1",

frontend/package.json

@@ -11,6 +11,7 @@ import ReactFlow, {
 } from 'reactflow'
 import dagre from 'dagre'
 import 'reactflow/dist/style.css'
+import { useDependencyGraph } from '../hooks/useCachedQuery'
 
 interface DependencyGraphProps {
   repoId: string
@@ -47,17 +48,25 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[]) => {
 export function DependencyGraph({ repoId, apiUrl, apiKey }: DependencyGraphProps) {
   const [nodes, setNodes, onNodesChange] = useNodesState([])
   const [edges, setEdges, onEdgesChange] = useEdgesState([])
-  const [loading, setLoading] = useState(true)
   const [metrics, setMetrics] = useState<any>(null)
   const [filterCritical, setFilterCritical] = useState(false)
   const [minDeps, setMinDeps] = useState(0)
   const [highlightedNode, setHighlightedNode] = useState<string | null>(null)
   const [allNodes, setAllNodes] = useState<Node[]>([])
   const [allEdges, setAllEdges] = useState<Edge[]>([])
 
+  // Use cached query for dependencies
+  const { data, isLoading: loading, isFetching } = useDependencyGraph({ 
+    repoId, 
+    apiKey 
+  })
+
+  // Process data when it arrives
   useEffect(() => {
-    loadGraph()
-  }, [repoId])
+    if (data) {
+      processGraphData(data)
+    }
+  }, [data])
 
   useEffect(() => {
     if (allNodes.length > 0) {
@@ -89,83 +98,67 @@ export function DependencyGraph({ repoId, apiUrl, apiKey }: DependencyGraphProps
     setEdges(layoutedEdges)
   }
 
-  const loadGraph = async () => {
-    setLoading(true)
-    try {
-      const response = await fetch(`${apiUrl}/api/repos/${repoId}/dependencies`, {
-        headers: {
-          'Authorization': `Bearer ${apiKey}`
-        }
-      })
+  const processGraphData = (data: any) => {
+    const flowNodes: Node[] = data.nodes.map((node: any) => {
+      const fileName = node.label || node.id.split('/').pop()
+      const fullPath = node.id
+      const importCount = node.import_count || node.imports || 0
 
-      const data = await response.json()
-      
-      const flowNodes: Node[] = data.nodes.map((node: any) => {
-        const fileName = node.label || node.id.split('/').pop()
-        const fullPath = node.id
-        const importCount = node.import_count || node.imports || 0
-        
-        return {
-          id: node.id,
-          type: 'default',
-          data: { 
-            label: (
-              <div title={fullPath} style={{ cursor: 'pointer' }}>
-                <div style={{ fontWeight: 600, fontSize: '11px', marginBottom: '4px' }}>
-                  {fileName}
-                </div>
-                {importCount > 0 && (
-                  <div style={{ fontSize: '9px', opacity: 0.8 }}>
-                    {importCount} imports
-                  </div>
-                )}
+      return {
+        id: node.id,
+        type: 'default',
+        data: { 
+          label: (
+            <div title={fullPath} style={{ cursor: 'pointer' }}>
+              <div style={{ fontWeight: 600, fontSize: '11px', marginBottom: '4px' }}>
+                {fileName}
               </div>
-            ),
-            language: node.language,
-            imports: importCount
-          },
-          position: { x: 0, y: 0 },
-          style: {
-            background: getLanguageColor(node.language),
-            color: 'white',
-            border: '2px solid #3b82f6',
-            borderRadius: '8px',
-            padding: '8px 12px',
-            fontSize: '11px',
-            fontFamily: 'monospace',
-            width: 180,
-            height: 60
-          }
-        }
-      })
-      
-      const flowEdges: Edge[] = data.edges.map((edge: any) => ({
-        id: `${edge.source}-${edge.target}`,
-        source: edge.source,
-        target: edge.target,
-        animated: false,
-        style: { stroke: '#4b5563', strokeWidth: 1.5 },
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          color: '#4b5563',
+              {importCount > 0 && (
+                <div style={{ fontSize: '9px', opacity: 0.8 }}>
+                  {importCount} imports
+                </div>
+              )}
+            </div>
+          ),
+          language: node.language,
+          imports: importCount
         },
-      }))
-      
-      setAllNodes(flowNodes)
-      setAllEdges(flowEdges)
-      setMetrics(data.metrics)
-      
-      const { nodes: layoutedNodes, edges: layoutedEdges } = 
-        getLayoutedElements(flowNodes, flowEdges)
-      
-      setNodes(layoutedNodes)
-      setEdges(layoutedEdges)
-      
-    } catch (error) {
-      console.error('Error loading graph:', error)
-    } finally {
-      setLoading(false)
-    }
+        position: { x: 0, y: 0 },
+        style: {
+          background: getLanguageColor(node.language),
+          color: 'white',
+          border: '2px solid #3b82f6',
+          borderRadius: '8px',
+          padding: '8px 12px',
+          fontSize: '11px',
+          fontFamily: 'monospace',
+          width: 180,
+          height: 60
+        }
+      }
+    })
+    
+    const flowEdges: Edge[] = data.edges.map((edge: any) => ({
+      id: `${edge.source}-${edge.target}`,
+      source: edge.source,
+      target: edge.target,
+      animated: false,
+      style: { stroke: '#4b5563', strokeWidth: 1.5 },
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: '#4b5563',
+      },
+    }))
+    
+    setAllNodes(flowNodes)
+    setAllEdges(flowEdges)
+    setMetrics(data.metrics)
+    
+    const { nodes: layoutedNodes, edges: layoutedEdges } = 
+      getLayoutedElements(flowNodes, flowEdges)
+    
+    setNodes(layoutedNodes)
+    setEdges(layoutedEdges)
   }
 
   const handleNodeClick = useCallback((event: any, node: Node) => {

frontend/src/components/DependencyGraph.tsx

@@ -1,9 +1,11 @@
 import type { Repository } from '../types'
+import { RepoGridSkeleton } from './ui/Skeleton'
 
 interface RepoListProps {
   repos: Repository[]
   selectedRepo: string | null
   onSelect: (repoId: string) => void
+  loading?: boolean
 }
 
 // Status indicator with glow effect
@@ -40,7 +42,11 @@ const StatusIndicator = ({ status }: { status: string }) => {
   )
 }
 
-export function RepoList({ repos, selectedRepo, onSelect }: RepoListProps) {
+export function RepoList({ repos, selectedRepo, onSelect, loading }: RepoListProps) {
+  if (loading) {
+    return <RepoGridSkeleton count={3} />
+  }
+
   if (repos.length === 0) {
     return (
       <div className="bg-[#111113] border border-white/5 rounded-2xl p-16 text-center">
@@ -57,19 +63,20 @@ export function RepoList({ repos, selectedRepo, onSelect }: RepoListProps) {
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-      {repos.map((repo) => {
+      {repos.map((repo, index) => {
         const isSelected = selectedRepo === repo.id
 
         return (
           <button
             key={repo.id}
             onClick={() => onSelect(repo.id)}
             className={`group relative text-left rounded-2xl p-5 transition-all duration-300 
-              bg-[#111113] border overflow-hidden
+              bg-[#111113] border overflow-hidden opacity-0 animate-fade-in focus-ring
               ${isSelected 
                 ? 'border-blue-500/50 shadow-lg shadow-blue-500/10' 
                 : 'border-white/5 hover:border-white/10 hover:bg-[#151518]'
               }`}
+            style={{ animationDelay: `${index * 0.05}s` }}
           >
             {/* Subtle gradient overlay on hover */}
             <div className="absolute inset-0 bg-gradient-to-br from-blue-500/5 via-transparent to-purple-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

frontend/src/components/RepoList.tsx

@@ -3,6 +3,7 @@ import { toast } from 'sonner'
 import { Progress } from '@/components/ui/progress'
 import type { Repository } from '../types'
 import { WS_URL } from '../config/api'
+import { useInvalidateRepoCache } from '../hooks/useCachedQuery'
 
 interface RepoOverviewProps {
   repo: Repository
@@ -23,6 +24,9 @@ export function RepoOverview({ repo, onReindex, apiUrl, apiKey }: RepoOverviewPr
   const [progress, setProgress] = useState<IndexProgress | null>(null)
   const wsRef = useRef<WebSocket | null>(null)
   const completedRef = useRef(false)
+  
+  // Cache invalidation hook
+  const invalidateCache = useInvalidateRepoCache()
 
   useEffect(() => {
     return () => {
@@ -62,6 +66,8 @@ export function RepoOverview({ repo, onReindex, apiUrl, apiKey }: RepoOverviewPr
           toast.success(`Indexing complete! ${data.total_functions} functions indexed.`, { id: 'reindex' })
           setIndexing(false)
           setProgress(null)
+          // Invalidate caches after re-index
+          invalidateCache(repo.id)
           onReindex()
         } else if (data.type === 'error') {
           completedRef.current = true

frontend/src/components/RepoOverview.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useStyleAnalysis } from '../hooks/useCachedQuery'
 
 interface StyleInsightsProps {
   repoId: string
@@ -7,27 +7,8 @@ interface StyleInsightsProps {
 }
 
 export function StyleInsights({ repoId, apiUrl, apiKey }: StyleInsightsProps) {
-  const [data, setData] = useState<any>(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    loadStyleData()
-  }, [repoId])
-
-  const loadStyleData = async () => {
-    setLoading(true)
-    try {
-      const response = await fetch(`${apiUrl}/api/repos/${repoId}/style-analysis`, {
-        headers: { 'Authorization': `Bearer ${apiKey}` }
-      })
-      const result = await response.json()
-      setData(result)
-    } catch (error) {
-      console.error('Error loading style data:', error)
-    } finally {
-      setLoading(false)
-    }
-  }
+  // Use cached query for style analysis
+  const { data, isLoading: loading } = useStyleAnalysis({ repoId, apiKey })
 
   if (loading) {
     return (

frontend/src/components/StyleInsights.tsx

@@ -20,6 +20,7 @@ export function DashboardHome() {
   const [selectedRepo, setSelectedRepo] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<RepoTab>('overview')
   const [loading, setLoading] = useState(false)
+  const [reposLoading, setReposLoading] = useState(true)
   const [showPerformance, setShowPerformance] = useState(false)
 
   const fetchRepos = async () => {
@@ -33,6 +34,8 @@ export function DashboardHome() {
       setRepos(data.repositories || [])
     } catch (error) {
       console.error('Error fetching repos:', error)
+    } finally {
+      setReposLoading(false)
     }
   }
 
@@ -150,6 +153,7 @@ export function DashboardHome() {
           <RepoList 
             repos={repos} 
             selectedRepo={selectedRepo}
+            loading={reposLoading}
             onSelect={(id) => {
               setSelectedRepo(id)
               setActiveTab('overview')