feat: integrate UI components into Search pages with pagination and loading

- Add useDebounce hook for future search optimization
- Integrate LoadingState, ErrorState, RefreshControl, and PaginationLoader into searchResults.tsx
- Add pull-to-refresh functionality with RefreshControl component
- Implement pagination with loadMore and PaginationLoader
- Add error handling with retry functionality using ErrorState
- Update SearchResultsGrid to support refreshControl, onEndReached, and ListFooterComponent props
- Add scroll event handling for pagination trigger
- Add TODO comment in searchWorksResults.tsx for backend API integration
- Reduce initial search limit from 50 to 20 for better performance

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

components/SearchResultsGrid.tsx

@@ -30,6 +30,9 @@ interface TemplateSearchResultItem {
 interface SearchResultsGridProps {
     results: TemplateSearchResultItem[]
     loading?: boolean
+    refreshControl?: React.ReactElement
+    onEndReached?: () => void
+    ListFooterComponent?: React.ReactElement | null
 }
 
 // 计算卡片高度的辅助函数
@@ -41,7 +44,7 @@ const calculateCardHeight = (width: number, aspectRatio?: number): number => {
     return width * 1.2
 }
 
-export default function SearchResultsGrid({ results, loading }: SearchResultsGridProps) {
+export default function SearchResultsGrid({ results, loading, refreshControl, onEndReached, ListFooterComponent }: SearchResultsGridProps) {
     const { t } = useTranslation()
     const router = useRouter()
     const [gridWidth, setGridWidth] = useState(screenWidth)
@@ -57,6 +60,14 @@ export default function SearchResultsGrid({ results, loading }: SearchResultsGri
         })
     }
 
+    const handleScroll = (event: any) => {
+        const { layoutMeasurement, contentOffset, contentSize } = event.nativeEvent
+        const paddingToBottom = 20
+        if (layoutMeasurement.height + contentOffset.y >= contentSize.height - paddingToBottom) {
+            onEndReached?.()
+        }
+    }
+
     if (loading) {
         return (
             <View style={styles.loadingContainer}>
@@ -77,6 +88,9 @@ export default function SearchResultsGrid({ results, loading }: SearchResultsGri
         <ScrollView
             style={styles.scrollView}
             showsVerticalScrollIndicator={false}
+            refreshControl={refreshControl}
+            onScroll={handleScroll}
+            scrollEventThrottle={400}
         >
             <View
                 style={styles.gridContainer}
@@ -112,6 +126,7 @@ export default function SearchResultsGrid({ results, loading }: SearchResultsGri
                     )
                 })}
             </View>
+            {ListFooterComponent}
         </ScrollView>
     )
 }