feat: integrate social buttons in video page

- Add VideoSocialButton to VideoItem component
- Connect like/favorite actions with existing hooks
- Use Zustand store for state management
- Extend templateSocialStore to support favoriteCount
- Update tests for social button integration

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

app/(tabs)/video.tsx

@@ -17,6 +17,16 @@ import { useTranslation } from 'react-i18next'
 import { SameStyleIcon, WhiteStarIcon } from '@/components/icon'
 import { useRouter } from 'expo-router'
 import { useTemplates, type TemplateDetail } from '@/hooks'
+import { VideoSocialButton } from '@/components/blocks/ui/VideoSocialButton'
+import { useTemplateLike } from '@/hooks/use-template-like'
+import { useTemplateFavorite } from '@/hooks/use-template-favorite'
+import {
+  useTemplateSocialStore,
+  useTemplateLiked,
+  useTemplateFavorited,
+  useTemplateLikeCount,
+  useTemplateFavoriteCount,
+} from '@/stores/templateSocialStore'
 import LoadingState from '@/components/LoadingState'
 import ErrorState from '@/components/ErrorState'
 import PaginationLoader from '@/components/PaginationLoader'
@@ -67,6 +77,16 @@ export const VideoItem = memo(({ item, videoHeight }: { item: TemplateDetail; vi
     const router = useRouter()
     const [imageSize, setImageSize] = useState<{ width: number; height: number } | null>(null)
 
+    // 从 store 获取状态
+    const liked = useTemplateLiked(item.id) ?? false
+    const favorited = useTemplateFavorited(item.id) ?? false
+    const likeCount = useTemplateLikeCount(item.id) ?? item.likeCount
+    const favoriteCount = useTemplateFavoriteCount(item.id) ?? item.favoriteCount
+
+    // 使用 hooks 获取操作函数
+    const { like: onLike, unlike: onUnlike, loading: likeLoading } = useTemplateLike(item.id)
+    const { favorite: onFavorite, unfavorite: onUnfavorite, loading: favoriteLoading } = useTemplateFavorite(item.id)
+
     const handleImageLoad = useCallback((event: ImageLoadEventData) => {
         const { source } = event
         if (source?.width && source?.height) {
@@ -109,6 +129,20 @@ export const VideoItem = memo(({ item, videoHeight }: { item: TemplateDetail; vi
                 <SameStyleIcon />
                 <Text style={styles.actionButtonText}>{t('video.makeSame')}</Text>
             </Pressable>
+            {/* 社交按钮 */}
+            <VideoSocialButton
+                templateId={item.id}
+                liked={liked}
+                favorited={favorited}
+                likeCount={likeCount}
+                favoriteCount={favoriteCount}
+                loading={likeLoading || favoriteLoading}
+                onLike={onLike}
+                onUnlike={onUnlike}
+                onFavorite={onFavorite}
+                onUnfavorite={onUnfavorite}
+                testID="video-social-button"
+            />
         </View>
     )
 })