Merge branch 'add-fuzzy-search-to-tasks-view-arlf'

Author: knowsuchagency

src/components/command-palette/command-registry.ts

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import { fuzzyScore } from '@/lib/fuzzy-search'
 
 export interface Command {
   id: string
@@ -10,45 +11,6 @@ export interface Command {
   icon?: ReactNode
 }
 
-/**
- * Simple fuzzy search scoring
- * Returns a score > 0 if the query matches, 0 otherwise
- * Higher score = better match
- */
-function fuzzyScore(text: string, query: string): number {
-  const lowerText = text.toLowerCase()
-  const lowerQuery = query.toLowerCase()
-
-  // Exact match
-  if (lowerText === lowerQuery) return 100
-
-  // Starts with
-  if (lowerText.startsWith(lowerQuery)) return 80
-
-  // Contains
-  if (lowerText.includes(lowerQuery)) return 60
-
-  // Fuzzy character match
-  let textIndex = 0
-  let queryIndex = 0
-  let score = 0
-
-  while (textIndex < lowerText.length && queryIndex < lowerQuery.length) {
-    if (lowerText[textIndex] === lowerQuery[queryIndex]) {
-      score += 1
-      queryIndex++
-    }
-    textIndex++
-  }
-
-  // Only count as a match if all query characters were found
-  if (queryIndex === lowerQuery.length) {
-    return score
-  }
-
-  return 0
-}
-
 /**
  * Search commands by query
  */

src/components/kanban/kanban-board.tsx

@@ -7,6 +7,7 @@ import { DragProvider, useDrag } from './drag-context'
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { useTasks, useUpdateTaskStatus } from '@/hooks/use-tasks'
 import { cn } from '@/lib/utils'
+import { fuzzyScore } from '@/lib/fuzzy-search'
 import type { TaskStatus } from '@/types'
 
 const COLUMNS: TaskStatus[] = [
@@ -59,19 +60,45 @@ function MobileDropZone({ status }: { status: TaskStatus }) {
 
 interface KanbanBoardProps {
   repoFilter?: string | null
+  searchQuery?: string
 }
 
-function KanbanBoardInner({ repoFilter }: KanbanBoardProps) {
+function KanbanBoardInner({ repoFilter, searchQuery }: KanbanBoardProps) {
   const { data: allTasks = [], isLoading } = useTasks()
   const updateStatus = useUpdateTaskStatus()
   const { activeTask } = useDrag()
   const [activeTab, setActiveTab] = useState<TaskStatus>('IN_PROGRESS')
 
-  // Filter tasks by repo if filter is set
+  // Filter tasks by repo and search query, sort by latest first
   const tasks = useMemo(() => {
-    if (!repoFilter) return allTasks
-    return allTasks.filter((t) => t.repoName === repoFilter)
-  }, [allTasks, repoFilter])
+    let filtered = allTasks
+    if (repoFilter) {
+      filtered = filtered.filter((t) => t.repoName === repoFilter)
+    }
+    if (searchQuery?.trim()) {
+      // When searching, sort by fuzzy score
+      filtered = filtered
+        .map((t) => ({
+          task: t,
+          score: Math.max(
+            fuzzyScore(t.title, searchQuery),
+            fuzzyScore(t.description || '', searchQuery),
+            fuzzyScore(t.branch || '', searchQuery),
+            fuzzyScore(t.linearTicketId || '', searchQuery),
+            fuzzyScore(t.prUrl || '', searchQuery)
+          ),
+        }))
+        .filter(({ score }) => score > 0)
+        .sort((a, b) => b.score - a.score)
+        .map(({ task }) => task)
+    } else {
+      // Default sort: newest first
+      filtered = [...filtered].sort((a, b) =>
+        new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      )
+    }
+    return filtered
+  }, [allTasks, repoFilter, searchQuery])
 
   // Task counts for tabs
   const taskCounts = useMemo(() => {

src/lib/fuzzy-search.ts

@@ -0,0 +1,38 @@
+/**
+ * Simple fuzzy search scoring
+ * Returns a score > 0 if the query matches, 0 otherwise
+ * Higher score = better match
+ */
+export function fuzzyScore(text: string, query: string): number {
+  const lowerText = text.toLowerCase()
+  const lowerQuery = query.toLowerCase()
+
+  // Exact match
+  if (lowerText === lowerQuery) return 100
+
+  // Starts with
+  if (lowerText.startsWith(lowerQuery)) return 80
+
+  // Contains
+  if (lowerText.includes(lowerQuery)) return 60
+
+  // Fuzzy character match
+  let textIndex = 0
+  let queryIndex = 0
+  let score = 0
+
+  while (textIndex < lowerText.length && queryIndex < lowerQuery.length) {
+    if (lowerText[textIndex] === lowerQuery[queryIndex]) {
+      score += 1
+      queryIndex++
+    }
+    textIndex++
+  }
+
+  // Only count as a match if all query characters were found
+  if (queryIndex === lowerQuery.length) {
+    return score
+  }
+
+  return 0
+}

src/routes/tasks/index.tsx

@@ -4,7 +4,7 @@ import { KanbanBoard } from '@/components/kanban/kanban-board'
 import { SelectionProvider, useSelection } from '@/components/kanban/selection-context'
 import { Button } from '@/components/ui/button'
 import { HugeiconsIcon } from '@hugeicons/react'
-import { Delete02Icon, Cancel01Icon, CheckListIcon, FilterIcon } from '@hugeicons/core-free-icons'
+import { Delete02Icon, Cancel01Icon, CheckListIcon, FilterIcon, Search01Icon } from '@hugeicons/core-free-icons'
 import {
   AlertDialog,
   AlertDialogAction,
@@ -23,6 +23,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select'
+import { Input } from '@/components/ui/input'
 import { useBulkDeleteTasks, useTasks } from '@/hooks/use-tasks'
 
 export const Route = createFileRoute('/tasks/')({
@@ -42,6 +43,7 @@ function KanbanViewContent() {
   const bulkDelete = useBulkDeleteTasks()
   const { data: tasks = [] } = useTasks()
   const [repoFilter, setRepoFilter] = useState<string | null>(null)
+  const [searchQuery, setSearchQuery] = useState('')
 
   // Unique repo names for filtering
   const repoNames = useMemo(() => {
@@ -105,6 +107,15 @@ function KanbanViewContent() {
           <>
             <h1 className="text-sm font-medium max-sm:hidden">Tasks</h1>
             <div className="flex items-center gap-2">
+              <div className="relative">
+                <HugeiconsIcon icon={Search01Icon} size={12} strokeWidth={2} className="absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  placeholder="Filter tasks..."
+                  className="w-40 pl-6"
+                />
+              </div>
               <Select
                 value={repoFilter ?? ''}
                 onValueChange={(v) => setRepoFilter(v || null)}
@@ -133,7 +144,7 @@ function KanbanViewContent() {
         )}
       </div>
       <div className="flex-1 overflow-hidden">
-        <KanbanBoard repoFilter={repoFilter} />
+        <KanbanBoard repoFilter={repoFilter} searchQuery={searchQuery} />
       </div>
     </div>
   )