From ae47498139ff975a6208856776ba916ae46153ab Mon Sep 17 00:00:00 2001
From: Chubby Granny Chaser <hydralauncher@proton.me>
Date: Mon, 29 Sep 2025 22:15:53 +0100
Subject: [PATCH] feat: sync with main

---
 .../profile-content/profile-content.tsx       | 154 +++---------------
 1 file changed, 27 insertions(+), 127 deletions(-)

diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.tsx b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
index 8de16d3d..41b11ba3 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -5,7 +5,6 @@ import { useAppDispatch, useFormat } from "@renderer/hooks";
 import { setHeaderTitle } from "@renderer/features";
 import { TelescopeIcon, ChevronRightIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
-import { UserGame } from "@types";
 import { LockedProfile } from "./locked-profile";
 import { ReportProfile } from "../report-profile/report-profile";
 import { FriendsBox } from "./friends-box";
@@ -17,8 +16,6 @@ import { useSectionCollapse } from "@renderer/hooks/use-section-collapse";
 import { motion, AnimatePresence } from "framer-motion";
 import {
   sectionVariants,
-  gameCardVariants,
-  gameGridVariants,
   chevronVariants,
   GAME_STATS_ANIMATION_DURATION_IN_MS,
 } from "./profile-animations";
@@ -38,8 +35,6 @@ export function ProfileContent() {
   const [statsIndex, setStatsIndex] = useState(0);
   const [isAnimationRunning, setIsAnimationRunning] = useState(true);
   const [sortBy, setSortBy] = useState<SortOption>("playedRecently");
-  const [prevLibraryGames, setPrevLibraryGames] = useState<UserGame[]>([]);
-  const [prevPinnedGames, setPrevPinnedGames] = useState<UserGame[]>([]);
   const statsAnimation = useRef(-1);
   const { toggleSection, isPinnedCollapsed } = useSectionCollapse();
 
@@ -92,27 +87,6 @@ export function ProfileContent() {
 
   const { numberFormatter } = useFormat();
 
-  const gamesHaveChanged = (
-    current: UserGame[],
-    previous: UserGame[]
-  ): boolean => {
-    if (current.length !== previous.length) return true;
-    return current.some(
-      (game, index) => game.objectId !== previous[index]?.objectId
-    );
-  };
-
-  const shouldAnimateLibrary = gamesHaveChanged(libraryGames, prevLibraryGames);
-  const shouldAnimatePinned = gamesHaveChanged(pinnedGames, prevPinnedGames);
-
-  useEffect(() => {
-    setPrevLibraryGames(libraryGames);
-  }, [libraryGames]);
-
-  useEffect(() => {
-    setPrevPinnedGames(pinnedGames);
-  }, [pinnedGames]);
-
   const usersAreFriends = useMemo(() => {
     return userProfile?.relation?.status === "ACCEPTED";
   }, [userProfile]);
@@ -192,57 +166,21 @@ export function ProfileContent() {
                         exit="collapsed"
                         layout
                       >
-                        <motion.ul
-                          className="profile-content__games-grid"
-                          variants={
-                            shouldAnimatePinned ? gameGridVariants : undefined
-                          }
-                          initial={shouldAnimatePinned ? "hidden" : undefined}
-                          animate={shouldAnimatePinned ? "visible" : undefined}
-                          exit={shouldAnimatePinned ? "exit" : undefined}
-                          key={
-                            shouldAnimatePinned
-                              ? `pinned-${sortBy}`
-                              : `pinned-static`
-                          }
-                        >
-                          {shouldAnimatePinned ? (
-                            <AnimatePresence mode="wait">
-                              {pinnedGames?.map((game, index) => (
-                                <motion.li
-                                  key={game.objectId}
-                                  variants={gameCardVariants}
-                                  initial="hidden"
-                                  animate="visible"
-                                  exit="exit"
-                                  transition={{ delay: index * 0.1 }}
-                                  style={{ listStyle: "none" }}
-                                >
-                                  <UserLibraryGameCard
-                                    game={game}
-                                    statIndex={statsIndex}
-                                    onMouseEnter={handleOnMouseEnterGameCard}
-                                    onMouseLeave={handleOnMouseLeaveGameCard}
-                                  />
-                                </motion.li>
-                              ))}
-                            </AnimatePresence>
-                          ) : (
-                            pinnedGames?.map((game) => (
-                              <li
-                                key={game.objectId}
-                                style={{ listStyle: "none" }}
-                              >
-                                <UserLibraryGameCard
-                                  game={game}
-                                  statIndex={statsIndex}
-                                  onMouseEnter={handleOnMouseEnterGameCard}
-                                  onMouseLeave={handleOnMouseLeaveGameCard}
-                                />
-                              </li>
-                            ))
-                          )}
-                        </motion.ul>
+                        <ul className="profile-content__games-grid">
+                          {pinnedGames?.map((game) => (
+                            <li
+                              key={game.objectId}
+                              style={{ listStyle: "none" }}
+                            >
+                              <UserLibraryGameCard
+                                game={game}
+                                statIndex={statsIndex}
+                                onMouseEnter={handleOnMouseEnterGameCard}
+                                onMouseLeave={handleOnMouseLeaveGameCard}
+                              />
+                            </li>
+                          ))}
+                        </ul>
                       </motion.div>
                     )}
                   </AnimatePresence>
@@ -262,54 +200,18 @@ export function ProfileContent() {
                     </div>
                   </div>
 
-                  <motion.ul
-                    className="profile-content__games-grid"
-                    variants={
-                      shouldAnimateLibrary ? gameGridVariants : undefined
-                    }
-                    initial={shouldAnimateLibrary ? "hidden" : undefined}
-                    animate={shouldAnimateLibrary ? "visible" : undefined}
-                    exit={shouldAnimateLibrary ? "exit" : undefined}
-                    key={
-                      shouldAnimateLibrary
-                        ? `library-${sortBy}`
-                        : `library-static`
-                    }
-                  >
-                    {shouldAnimateLibrary ? (
-                      <AnimatePresence mode="wait">
-                        {libraryGames?.map((game, index) => (
-                          <motion.li
-                            key={game.objectId}
-                            variants={gameCardVariants}
-                            initial="hidden"
-                            animate="visible"
-                            exit="exit"
-                            transition={{ delay: index * 0.1 }}
-                            style={{ listStyle: "none" }}
-                          >
-                            <UserLibraryGameCard
-                              game={game}
-                              statIndex={statsIndex}
-                              onMouseEnter={handleOnMouseEnterGameCard}
-                              onMouseLeave={handleOnMouseLeaveGameCard}
-                            />
-                          </motion.li>
-                        ))}
-                      </AnimatePresence>
-                    ) : (
-                      libraryGames?.map((game) => (
-                        <li key={game.objectId} style={{ listStyle: "none" }}>
-                          <UserLibraryGameCard
-                            game={game}
-                            statIndex={statsIndex}
-                            onMouseEnter={handleOnMouseEnterGameCard}
-                            onMouseLeave={handleOnMouseLeaveGameCard}
-                          />
-                        </li>
-                      ))
-                    )}
-                  </motion.ul>
+                  <ul className="profile-content__games-grid">
+                    {libraryGames?.map((game) => (
+                      <li key={game.objectId} style={{ listStyle: "none" }}>
+                        <UserLibraryGameCard
+                          game={game}
+                          statIndex={statsIndex}
+                          onMouseEnter={handleOnMouseEnterGameCard}
+                          onMouseLeave={handleOnMouseLeaveGameCard}
+                        />
+                      </li>
+                    ))}
+                  </ul>
                 </div>
               )}
             </div>
@@ -338,8 +240,6 @@ export function ProfileContent() {
     pinnedGames,
     isPinnedCollapsed,
     toggleSection,
-    shouldAnimateLibrary,
-    shouldAnimatePinned,
     sortBy,
   ]);