實作個人收藏、個人活動紀錄

components/favorite-button.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
+import { useAuth } from "@/contexts/auth-context"
 import { Button } from "@/components/ui/button"
 import { Heart } from "lucide-react"
 import { cn } from "@/lib/utils"
@@ -20,17 +21,31 @@ export function FavoriteButton({
   size = "md",
   variant = "ghost",
 }: FavoriteButtonProps) {
+  const { user, isFavorite, toggleFavorite } = useAuth()
   const [isFavorited, setIsFavorited] = useState(initialFavorited)
   const [isLoading, setIsLoading] = useState(false)
 
+  // 使用 isFavorite 的實時結果
+  const currentFavorited = user ? isFavorite(appId) : isFavorited
+
+  // 載入收藏狀態
+  useEffect(() => {
+    if (user) {
+      const favorited = isFavorite(appId)
+      setIsFavorited(favorited)
+    }
+  }, [user, appId, isFavorite])
+
   const handleToggle = async () => {
+    if (!user) {
+      console.warn('用戶未登入，無法收藏')
+      return
+    }
+
     setIsLoading(true)
 
     try {
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 300))
-
-      const newFavoriteState = !isFavorited
+      const newFavoriteState = await toggleFavorite(appId)
       setIsFavorited(newFavoriteState)
 
       // Call the callback if provided
@@ -58,16 +73,16 @@ export function FavoriteButton({
     <Button
       variant={variant}
       size="icon"
-      className={cn(sizeClasses[size], "transition-all duration-200", isFavorited && "text-red-500 hover:text-red-600")}
+      className={cn(sizeClasses[size], "transition-all duration-200", currentFavorited && "text-red-500 hover:text-red-600")}
       onClick={handleToggle}
       disabled={isLoading}
-      title={isFavorited ? "取消收藏" : "加入收藏"}
+      title={currentFavorited ? "取消收藏" : "加入收藏"}
     >
       <Heart
         className={cn(
           iconSizes[size],
           "transition-all duration-200",
-          isFavorited && "fill-current",
+          currentFavorited && "fill-current",
           isLoading && "animate-pulse",
         )}
       />