feat: implement client-side state management hooks

- Created useSearch hook for search state and debouncing
- Created useFilters hook for filter state management
- Created useOptimisticUpdate hook for optimistic UI updates
- Created useScrollPosition hook for scroll preservation
- Updated SearchBar, GlobalSearch, and ListDetailView to use new hooks
- Added comprehensive documentation for all hooks

Validates: Requirements 6.4, 7.3, 7.4, 8.3
Task: 9. Implement client-side state management

components/GlobalSearch.tsx

@@ -4,6 +4,7 @@ import { useState, useCallback } from 'react'
 import SearchBar from './SearchBar'
 import SearchResults from './SearchResults'
 import { searchItems } from '@/lib/actions'
+import { useSearch } from '@/hooks'
 
 interface ItemWithList {
   id: string
@@ -22,13 +23,10 @@ interface ItemWithList {
 }
 
 export default function GlobalSearch() {
-  const [searchQuery, setSearchQuery] = useState('')
   const [searchResults, setSearchResults] = useState<ItemWithList[]>([])
   const [isSearching, setIsSearching] = useState(false)
 
   const handleSearch = useCallback(async (query: string) => {
-    setSearchQuery(query)
-    
     if (!query.trim()) {
       setSearchResults([])
       setIsSearching(false)
@@ -47,10 +45,14 @@ export default function GlobalSearch() {
     }
   }, [])
 
+  const { debouncedQuery, clearSearch } = useSearch({
+    onSearch: handleSearch
+  })
+
   const handleClose = useCallback(() => {
-    setSearchQuery('')
+    clearSearch()
     setSearchResults([])
-  }, [])
+  }, [clearSearch])
 
   return (
     <div className="space-y-4">
@@ -59,10 +61,10 @@ export default function GlobalSearch() {
         placeholder="Search all tasks..."
       />
 
-      {searchQuery.trim() && (
+      {debouncedQuery.trim() && (
         <SearchResults 
           results={searchResults}
-          query={searchQuery}
+          query={debouncedQuery}
           onClose={handleClose}
         />
       )}