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/ListDetailView.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { useState, useCallback, useMemo } from 'react'
+import { useState, useCallback, useMemo, useEffect } from 'react'
 import ItemCard from './ItemCard'
 import SearchBar from './SearchBar'
-import FilterPanel, { FilterState } from './FilterPanel'
+import FilterPanel from './FilterPanel'
 import SearchResults from './SearchResults'
 import { searchItems, getItemsByFilter } from '@/lib/actions'
+import { useSearch, useFilters, useScrollPosition } from '@/hooks'
 
 interface Item {
   id: string
@@ -35,21 +36,13 @@ interface ListDetailViewProps {
 }
 
 export default function ListDetailView({ listId, initialItems }: ListDetailViewProps) {
-  const [searchQuery, setSearchQuery] = useState('')
   const [searchResults, setSearchResults] = useState<ItemWithList[]>([])
   const [isSearching, setIsSearching] = useState(false)
-  
-  const [filters, setFilters] = useState<FilterState>({
-    priority: null,
-    completed: null,
-    tags: [],
-    dueDateRange: { start: null, end: null },
-    sortBy: 'createdAt',
-    sortOrder: 'desc'
-  })
-  
   const [filteredItems, setFilteredItems] = useState<Item[]>(initialItems)
 
+  // Use scroll position preservation hook
+  useScrollPosition({ key: `list-${listId}` })
+
   // Extract all unique tags from items
   const availableTags = useMemo(() => {
     const tagSet = new Set<string>()
@@ -64,10 +57,8 @@ export default function ListDetailView({ listId, initialItems }: ListDetailViewP
     return Array.from(tagSet).sort()
   }, [initialItems])
 
-  // Handle search
-  const handleSearch = useCallback(async (query: string) => {
-    setSearchQuery(query)
-    
+  // Use search hook
+  const handleSearchCallback = useCallback(async (query: string) => {
     if (!query.trim()) {
       setSearchResults([])
       setIsSearching(false)
@@ -81,13 +72,17 @@ export default function ListDetailView({ listId, initialItems }: ListDetailViewP
     } catch (error) {
       console.error('Search error:', error)
       setSearchResults([])
+    } finally {
+      setIsSearching(false)
     }
   }, [listId])
 
-  // Handle filter changes
-  const handleFiltersChange = useCallback(async (newFilters: FilterState) => {
-    setFilters(newFilters)
-    
+  const { debouncedQuery } = useSearch({
+    onSearch: handleSearchCallback
+  })
+
+  // Use filters hook
+  const handleFiltersCallback = useCallback(async (newFilters: any) => {
     try {
       const results = await getItemsByFilter(listId, {
         priority: newFilters.priority,
@@ -104,8 +99,17 @@ export default function ListDetailView({ listId, initialItems }: ListDetailViewP
     }
   }, [listId, initialItems])
 
+  const { filters, setFilters } = useFilters({
+    onFiltersChange: handleFiltersCallback
+  })
+
+  // Apply initial filters on mount
+  useEffect(() => {
+    handleFiltersCallback(filters)
+  }, []) // Only run on mount
+
   // Determine which items to display
-  const displayItems = searchQuery.trim() ? searchResults : filteredItems
+  const displayItems = debouncedQuery.trim() ? searchResults : filteredItems
   const completedItems = displayItems.filter(item => item.completed)
   const incompleteItems = displayItems.filter(item => !item.completed)
 
@@ -113,22 +117,22 @@ export default function ListDetailView({ listId, initialItems }: ListDetailViewP
     <div className="space-y-6">
       {/* Search Bar */}
       <SearchBar 
-        onSearch={handleSearch}
+        onSearch={handleSearchCallback}
         placeholder="Search tasks in this list..."
       />
 
       {/* Filter Panel */}
       <FilterPanel
         filters={filters}
-        onFiltersChange={handleFiltersChange}
+        onFiltersChange={setFilters}
         availableTags={availableTags}
       />
 
       {/* Results */}
-      {searchQuery.trim() ? (
+      {debouncedQuery.trim() ? (
         <SearchResults 
           results={searchResults}
-          query={searchQuery}
+          query={debouncedQuery}
         />
       ) : (
         <div className="space-y-6">