From 4862afe8d6cfbc2f7f5602ec5e23f61a71289f1b Mon Sep 17 00:00:00 2001
From: syui <syui@syui.ai>
Date: Fri, 18 Jul 2025 15:07:31 +0900
Subject: [PATCH] Move favorite card display to user page only
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove favorite cards section from homepage
- Add favorite card display to individual user pages
- Display user's favorite card at the top of their card grid
- Center the favorite card with "Favorite Card" heading
- Skip display when fav is '0' or card not found

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/pages/HomePage.tsx | 49 ++-----------------------------
 src/components/pages/UserPage.tsx | 23 ++++++++++++++-
 2 files changed, 24 insertions(+), 48 deletions(-)

diff --git a/src/components/pages/HomePage.tsx b/src/components/pages/HomePage.tsx
index 4e8691b..51353c2 100644
--- a/src/components/pages/HomePage.tsx
+++ b/src/components/pages/HomePage.tsx
@@ -1,8 +1,6 @@
-import { useQuery, useQueries } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import Navigation from '../common/Navigation';
-import { fetchUsers, fetchUserCards } from '../../utils/api';
-import SpecialCard from '../card/SpecialCard';
-import type { Card } from '../../types';
+import { fetchUsers } from '../../utils/api';
 
 export default function HomePage() {
   
@@ -11,30 +9,6 @@ export default function HomePage() {
     queryFn: () => fetchUsers()
   });
 
-  // Get all users with fav cards
-  const usersWithFav = users?.data?.filter(user => user.fav && user.fav !== '0') || [];
-  
-  // Fetch cards for each user with fav
-  const favCardQueries = useQueries({
-    queries: usersWithFav.map(user => ({
-      queryKey: ['userCards', user.id],
-      queryFn: () => fetchUserCards(user.id),
-      enabled: !!user.id
-    }))
-  });
-
-  // Extract fav cards
-  const favCards: { user: typeof usersWithFav[0], card: Card }[] = [];
-  usersWithFav.forEach((user, index) => {
-    const userCards = favCardQueries[index]?.data?.data;
-    if (userCards && user.fav) {
-      const favCard = userCards.find(card => card.id === parseInt(user.fav));
-      if (favCard) {
-        favCards.push({ user, card: favCard });
-      }
-    }
-  });
-
   if (isLoading) {
     return (
       <div className="min-h-screen flex items-center justify-center">
@@ -54,25 +28,6 @@ export default function HomePage() {
           <a href="/docs" className="btn">help</a>
         </div>
 
-        {/* Favorite Cards Section */}
-        {favCards.length > 0 && (
-          <div className="mb-8">
-            <h2 className="text-xl font-bold mb-4">Favorite Cards</h2>
-            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
-              {favCards.map(({ user, card }) => (
-                <div key={`${user.id}-${card.id}`}>
-                  <SpecialCard card={card} />
-                  <div className="text-center text-sm mt-2">
-                    <a href={`/${user.username}`} className="text-gray-600 hover:text-primary">
-                      @{user.username}
-                    </a>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
         {users?.data && Array.isArray(users.data) && users.data.length > 0 && (
           <div className="bg-white rounded-lg p-6">
             <div className="grid gap-4">
diff --git a/src/components/pages/UserPage.tsx b/src/components/pages/UserPage.tsx
index e18ed96..d827f43 100644
--- a/src/components/pages/UserPage.tsx
+++ b/src/components/pages/UserPage.tsx
@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import Navigation from '../common/Navigation';
 import CardGrid from '../card/CardGrid';
 import UserProfile from '../user/UserProfile';
+import SpecialCard from '../card/SpecialCard';
 import { fetchUsers, fetchUserCards } from '../../utils/api';
 
 export default function UserPage() {
@@ -54,7 +55,27 @@ export default function UserPage() {
             <i className="fa-solid fa-spinner fa-spin text-4xl text-yellow-500"></i>
           </div>
         ) : (
-          <CardGrid cards={cards?.data || []} user={user} />
+          <>
+            {/* Favorite Card Section */}
+            {user.fav && user.fav !== '0' && cards?.data && (
+              (() => {
+                const favCard = cards.data.find(card => card.id === parseInt(user.fav));
+                if (favCard) {
+                  return (
+                    <div className="mb-8">
+                      <h2 className="text-xl font-bold mb-4 text-center">Favorite Card</h2>
+                      <div className="flex justify-center">
+                        <SpecialCard card={favCard} />
+                      </div>
+                    </div>
+                  );
+                }
+                return null;
+              })()
+            )}
+            
+            <CardGrid cards={cards?.data || []} user={user} />
+          </>
         )}
       </div>
     </div>