From cad50649aa45f781941ec004a2a2549cd4ac0d28 Mon Sep 17 00:00:00 2001 From: Moyasee Date: Thu, 25 Sep 2025 18:07:38 +0300 Subject: [PATCH 1/6] fix: single pinned game not visible in profile --- .../profile-content/profile-content.tsx | 45 ++++++++++--------- 1 file changed, 25 insertions(+), 20 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 7b1ac8e2..68e7fecf 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx +++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx @@ -82,13 +82,14 @@ export function ProfileContent() { const hasGames = libraryGames.length > 0; const hasPinnedGames = pinnedGames.length > 0; + const hasAnyGames = hasGames || hasPinnedGames; - const shouldShowRightContent = hasGames || userProfile.friends.length > 0; + const shouldShowRightContent = hasAnyGames || userProfile.friends.length > 0; return (
- {!hasGames && ( + {!hasAnyGames && (
@@ -98,7 +99,7 @@ export function ProfileContent() {
)} - {hasGames && ( + {hasAnyGames && ( <> {hasPinnedGames && (
@@ -121,24 +122,28 @@ export function ProfileContent() {
)} -
-

{t("library")}

- {userStats && ( - {numberFormatter.format(userStats.libraryCount)} - )} -
+ {hasGames && ( +
+
+

{t("library")}

+ {userStats && ( + {numberFormatter.format(userStats.libraryCount)} + )} +
-
    - {libraryGames?.map((game) => ( - - ))} -
+
    + {libraryGames?.map((game) => ( + + ))} +
+
+ )} )}
From a29f2ba7414dfc4fe459ea5ddd4e9ee942f03016 Mon Sep 17 00:00:00 2001 From: Moyasee Date: Thu, 25 Sep 2025 20:20:49 +0300 Subject: [PATCH 2/6] feat: added pin/unpin to the game card in profile --- .../user-profile/user-profile.context.tsx | 3 + .../profile-content/profile-content.tsx | 7 ++- .../user-library-game-card.scss | 35 ++++++++++-- .../user-library-game-card.tsx | 56 +++++++++++++++++-- 4 files changed, 90 insertions(+), 11 deletions(-) diff --git a/src/renderer/src/context/user-profile/user-profile.context.tsx b/src/renderer/src/context/user-profile/user-profile.context.tsx index 3b10b3e5..499b85ee 100644 --- a/src/renderer/src/context/user-profile/user-profile.context.tsx +++ b/src/renderer/src/context/user-profile/user-profile.context.tsx @@ -14,6 +14,7 @@ export interface UserProfileContext { isMe: boolean; userStats: UserStats | null; getUserProfile: () => Promise; + getUserLibraryGames: () => Promise; setSelectedBackgroundImage: React.Dispatch>; backgroundImage: string; badges: Badge[]; @@ -29,6 +30,7 @@ export const userProfileContext = createContext({ isMe: false, userStats: null, getUserProfile: async () => {}, + getUserLibraryGames: async () => {}, setSelectedBackgroundImage: () => {}, backgroundImage: "", badges: [], @@ -149,6 +151,7 @@ export function UserProfileContextProvider({ heroBackground, isMe, getUserProfile, + getUserLibraryGames, setSelectedBackgroundImage, backgroundImage: getBackgroundImageUrl(), userStats, 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 68e7fecf..3c27ae02 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx +++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx @@ -84,7 +84,8 @@ export function ProfileContent() { const hasPinnedGames = pinnedGames.length > 0; const hasAnyGames = hasGames || hasPinnedGames; - const shouldShowRightContent = hasAnyGames || userProfile.friends.length > 0; + const shouldShowRightContent = + hasAnyGames || userProfile.friends.length > 0; return (
@@ -127,7 +128,9 @@ export function ProfileContent() {

{t("library")}

{userStats && ( - {numberFormatter.format(userStats.libraryCount)} + + {numberFormatter.format(userStats.libraryCount)} + )}
diff --git a/src/renderer/src/pages/profile/profile-content/user-library-game-card.scss b/src/renderer/src/pages/profile/profile-content/user-library-game-card.scss index ba3f5602..ab1f3456 100644 --- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.scss +++ b/src/renderer/src/pages/profile/profile-content/user-library-game-card.scss @@ -65,18 +65,45 @@ padding: 8px; } - &__favorite-icon { + &__actions-container { position: absolute; top: 8px; right: 8px; - color: #ff6b6b; + display: flex; + gap: 6px; + z-index: 2; + } + + &__favorite-icon { + color: white; background-color: rgba(0, 0, 0, 0.7); border-radius: 50%; - padding: 4px; + padding: 6px; display: flex; align-items: center; justify-content: center; - z-index: 2; + } + + &__pin-button { + color: white; + background-color: rgba(0, 0, 0, 0.7); + border: none; + border-radius: 50%; + padding: 6px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: background-color 0.2s ease; + + &:hover { + background-color: rgba(0, 0, 0, 0.9); + } + + &:disabled { + opacity: 0.6; + cursor: not-allowed; + } } &__playtime { diff --git a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx index e64cd3bb..ca31b5de 100644 --- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx +++ b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx @@ -1,6 +1,6 @@ import { UserGame } from "@types"; import HydraIcon from "@renderer/assets/icons/hydra.svg?react"; -import { useFormat } from "@renderer/hooks"; +import { useFormat, useToast } from "@renderer/hooks"; import { useNavigate } from "react-router-dom"; import { useCallback, useContext, useState } from "react"; import { @@ -14,6 +14,8 @@ import { TrophyIcon, AlertFillIcon, HeartFillIcon, + PinIcon, + PinSlashIcon, } from "@primer/octicons-react"; import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants"; import { Tooltip } from "react-tooltip"; @@ -33,11 +35,14 @@ export function UserLibraryGameCard({ onMouseEnter, onMouseLeave, }: UserLibraryGameCardProps) { - const { userProfile } = useContext(userProfileContext); + const { userProfile, isMe, getUserLibraryGames } = useContext(userProfileContext); const { t } = useTranslation("user_profile"); + const { t: tGame } = useTranslation("game_details"); const { numberFormatter } = useFormat(); + const { showSuccessToast } = useToast(); const navigate = useNavigate(); const [isTooltipHovered, setIsTooltipHovered] = useState(false); + const [isPinning, setIsPinning] = useState(false); const getStatsItemCount = useCallback(() => { let statsCount = 1; @@ -89,6 +94,30 @@ export function UserLibraryGameCard({ [numberFormatter, t] ); + const toggleGamePinned = async () => { + setIsPinning(true); + + try { + if (game.isPinned) { + await window.electron.removeGameFromPinned(game.shop, game.objectId).then(() => { + showSuccessToast(tGame("game_removed_from_pinned")); + }); + } else { + await window.electron.addGameToPinned(game.shop, game.objectId).then(() => { + showSuccessToast(tGame("game_added_to_pinned")); + }); + } + + // Add a small delay to allow server synchronization before refreshing + await new Promise(resolve => setTimeout(resolve, 1000)); + + // Refresh the library games to update the UI + await getUserLibraryGames(); + } finally { + setIsPinning(false); + } + }; + return ( <>
  • navigate(buildUserGameDetailsPath(game))} >
    - {game.isFavorite && ( -
    - + {(game.isFavorite || isMe) && ( +
    + {game.isFavorite && ( +
    + +
    + )} + {isMe && ( + + )}
    )} Date: Thu, 25 Sep 2025 20:23:33 +0300 Subject: [PATCH 3/6] feat: added pin/unpin to the game card in profile --- .../user-library-game-card.tsx | 31 ++++++++++++------- 1 file changed, 20 insertions(+), 11 deletions(-) diff --git a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx index ca31b5de..8436b5d6 100644 --- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx +++ b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx @@ -35,7 +35,8 @@ export function UserLibraryGameCard({ onMouseEnter, onMouseLeave, }: UserLibraryGameCardProps) { - const { userProfile, isMe, getUserLibraryGames } = useContext(userProfileContext); + const { userProfile, isMe, getUserLibraryGames } = + useContext(userProfileContext); const { t } = useTranslation("user_profile"); const { t: tGame } = useTranslation("game_details"); const { numberFormatter } = useFormat(); @@ -99,18 +100,22 @@ export function UserLibraryGameCard({ try { if (game.isPinned) { - await window.electron.removeGameFromPinned(game.shop, game.objectId).then(() => { - showSuccessToast(tGame("game_removed_from_pinned")); - }); + await window.electron + .removeGameFromPinned(game.shop, game.objectId) + .then(() => { + showSuccessToast(tGame("game_removed_from_pinned")); + }); } else { - await window.electron.addGameToPinned(game.shop, game.objectId).then(() => { - showSuccessToast(tGame("game_added_to_pinned")); - }); + await window.electron + .addGameToPinned(game.shop, game.objectId) + .then(() => { + showSuccessToast(tGame("game_added_to_pinned")); + }); } - + // Add a small delay to allow server synchronization before refreshing - await new Promise(resolve => setTimeout(resolve, 1000)); - + await new Promise((resolve) => setTimeout(resolve, 1000)); + // Refresh the library games to update the UI await getUserLibraryGames(); } finally { @@ -149,7 +154,11 @@ export function UserLibraryGameCard({ }} disabled={isPinning} > - {game.isPinned ? : } + {game.isPinned ? ( + + ) : ( + + )} )}
    From fd1f13225b6ba7006a8ec765d12f80fe04a4dc97 Mon Sep 17 00:00:00 2001 From: Moyasee Date: Thu, 25 Sep 2025 20:26:49 +0300 Subject: [PATCH 4/6] feat: added pin/unpin to the game card in profile --- .../user-library-game-card.tsx | 33 +++++++------------ 1 file changed, 11 insertions(+), 22 deletions(-) diff --git a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx index 8436b5d6..e3a5911e 100644 --- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx +++ b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx @@ -35,8 +35,7 @@ export function UserLibraryGameCard({ onMouseEnter, onMouseLeave, }: UserLibraryGameCardProps) { - const { userProfile, isMe, getUserLibraryGames } = - useContext(userProfileContext); + const { userProfile, isMe, getUserLibraryGames } = useContext(userProfileContext); const { t } = useTranslation("user_profile"); const { t: tGame } = useTranslation("game_details"); const { numberFormatter } = useFormat(); @@ -100,23 +99,17 @@ export function UserLibraryGameCard({ try { if (game.isPinned) { - await window.electron - .removeGameFromPinned(game.shop, game.objectId) - .then(() => { - showSuccessToast(tGame("game_removed_from_pinned")); - }); + await window.electron.removeGameFromPinned(game.shop, game.objectId).then(() => { + showSuccessToast(tGame("game_removed_from_pinned")); + }); } else { - await window.electron - .addGameToPinned(game.shop, game.objectId) - .then(() => { - showSuccessToast(tGame("game_added_to_pinned")); - }); + await window.electron.addGameToPinned(game.shop, game.objectId).then(() => { + showSuccessToast(tGame("game_added_to_pinned")); + }); } - - // Add a small delay to allow server synchronization before refreshing - await new Promise((resolve) => setTimeout(resolve, 1000)); - - // Refresh the library games to update the UI + + await new Promise(resolve => setTimeout(resolve, 1000)); + await getUserLibraryGames(); } finally { setIsPinning(false); @@ -154,11 +147,7 @@ export function UserLibraryGameCard({ }} disabled={isPinning} > - {game.isPinned ? ( - - ) : ( - - )} + {game.isPinned ? : } )}
    From f027f05e0214e9ab2f5b7b5f640e702d07da541b Mon Sep 17 00:00:00 2001 From: Moyasee Date: Fri, 26 Sep 2025 16:54:10 +0300 Subject: [PATCH 5/6] feat: added functionality to collapse/expand pinned list in user profile --- .../src/hooks/use-section-collapse.ts | 30 +++ .../profile-content/profile-content.scss | 34 +++- .../profile-content/profile-content.tsx | 172 +++++++++++++++--- .../user-library-game-card.tsx | 31 ++-- 4 files changed, 229 insertions(+), 38 deletions(-) create mode 100644 src/renderer/src/hooks/use-section-collapse.ts diff --git a/src/renderer/src/hooks/use-section-collapse.ts b/src/renderer/src/hooks/use-section-collapse.ts new file mode 100644 index 00000000..3c534189 --- /dev/null +++ b/src/renderer/src/hooks/use-section-collapse.ts @@ -0,0 +1,30 @@ +import { useState, useCallback } from "react"; + +interface SectionCollapseState { + pinned: boolean; + library: boolean; +} + +export function useSectionCollapse() { + const [collapseState, setCollapseState] = useState({ + pinned: false, + library: false, + }); + + const toggleSection = useCallback( + (section: keyof SectionCollapseState) => { + setCollapseState(prevState => ({ + ...prevState, + [section]: !prevState[section], + })); + }, + [] + ); + + return { + collapseState, + toggleSection, + isPinnedCollapsed: collapseState.pinned, + isLibraryCollapsed: collapseState.library, + }; +} \ No newline at end of file diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.scss b/src/renderer/src/pages/profile/profile-content/profile-content.scss index 57a24e2f..4ef53a6d 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.scss +++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss @@ -54,8 +54,40 @@ &__section-header { display: flex; align-items: center; - justify-content: space-between; margin-bottom: calc(globals.$spacing-unit * 2); + gap: calc(globals.$spacing-unit); + } + + &__section-title-group { + display: flex; + align-items: center; + gap: calc(globals.$spacing-unit); + flex: 1; + } + + &__section-count { + margin-left: auto; + } + + &__collapse-button { + background: none; + border: none; + color: rgba(255, 255, 255, 0.7); + cursor: pointer; + padding: 4px; + border-radius: 4px; + display: flex; + align-items: center; + justify-content: center; + transition: all ease 0.2s; + flex-shrink: 0; + + &:hover { + color: rgba(255, 255, 255, 0.9); + background-color: rgba(255, 255, 255, 0.1); + } + + } &__tabs { 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 3c27ae02..bd7eddb3 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx +++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx @@ -3,7 +3,7 @@ import { useContext, useEffect, useMemo, useRef, useState } from "react"; import { ProfileHero } from "../profile-hero/profile-hero"; import { useAppDispatch, useFormat } from "@renderer/hooks"; import { setHeaderTitle } from "@renderer/features"; -import { TelescopeIcon } from "@primer/octicons-react"; +import { TelescopeIcon, ChevronRightIcon } from "@primer/octicons-react"; import { useTranslation } from "react-i18next"; import { LockedProfile } from "./locked-profile"; import { ReportProfile } from "../report-profile/report-profile"; @@ -11,16 +11,80 @@ import { FriendsBox } from "./friends-box"; import { RecentGamesBox } from "./recent-games-box"; import { UserStatsBox } from "./user-stats-box"; import { UserLibraryGameCard } from "./user-library-game-card"; +import { useSectionCollapse } from "@renderer/hooks/use-section-collapse"; +import { motion, AnimatePresence } from "framer-motion"; import "./profile-content.scss"; const GAME_STATS_ANIMATION_DURATION_IN_MS = 3500; +const sectionVariants = { + collapsed: { + opacity: 0, + y: -20, + height: 0, + transition: { + duration: 0.3, + ease: [0.25, 0.1, 0.25, 1], + opacity: { duration: 0.1 }, + y: { duration: 0.1 }, + height: { duration: 0.2 } + } + }, + expanded: { + opacity: 1, + y: 0, + height: "auto", + transition: { + duration: 0.3, + ease: [0.25, 0.1, 0.25, 1], + opacity: { duration: 0.2, delay: 0.1 }, + y: { duration: 0.3 }, + height: { duration: 0.3 } + } + } +}; + +const gameCardVariants = { + hidden: { + opacity: 0, + y: 20, + scale: 0.95 + }, + visible: { + opacity: 1, + y: 0, + scale: 1, + transition: { + duration: 0.4, + ease: [0.25, 0.1, 0.25, 1] + } + } +}; + +const chevronVariants = { + collapsed: { + rotate: 0, + transition: { + duration: 0.2, + ease: "easeInOut" + } + }, + expanded: { + rotate: 90, + transition: { + duration: 0.2, + ease: "easeInOut" + } + } +}; + export function ProfileContent() { const { userProfile, isMe, userStats, libraryGames, pinnedGames } = useContext(userProfileContext); const [statsIndex, setStatsIndex] = useState(0); const [isAnimationRunning, setIsAnimationRunning] = useState(true); const statsAnimation = useRef(-1); + const { toggleSection, isPinnedCollapsed } = useSectionCollapse(); const dispatch = useAppDispatch(); @@ -101,53 +165,107 @@ export function ProfileContent() { )} {hasAnyGames && ( - <> +
    {hasPinnedGames && ( -
    +
    -

    {t("pinned")}

    - {pinnedGames.length} +
    + +

    {t("pinned")}

    +
    + + {pinnedGames.length} +
    -
      - {pinnedGames?.map((game) => ( - - ))} -
    + + {!isPinnedCollapsed && ( + +
      + {pinnedGames?.map((game, index) => ( + + + + ))} +
    +     + )} +
    )} {hasGames && (
    -

    {t("library")}

    +
    +

    {t("library")}

    +
    {userStats && ( - + {numberFormatter.format(userStats.libraryCount)} )}
      - {libraryGames?.map((game) => ( - ( + + variants={gameCardVariants} + initial="hidden" + animate="visible" + transition={{ delay: index * 0.1 }} + style={{ listStyle: 'none' }} + > + + ))}
    )} - +
    )}
    @@ -171,6 +289,8 @@ export function ProfileContent() { statsIndex, libraryGames, pinnedGames, + isPinnedCollapsed, + toggleSection, ]); return ( diff --git a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx index e3a5911e..e00b5863 100644 --- a/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx +++ b/src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx @@ -35,7 +35,8 @@ export function UserLibraryGameCard({ onMouseEnter, onMouseLeave, }: UserLibraryGameCardProps) { - const { userProfile, isMe, getUserLibraryGames } = useContext(userProfileContext); + const { userProfile, isMe, getUserLibraryGames } = + useContext(userProfileContext); const { t } = useTranslation("user_profile"); const { t: tGame } = useTranslation("game_details"); const { numberFormatter } = useFormat(); @@ -99,17 +100,21 @@ export function UserLibraryGameCard({ try { if (game.isPinned) { - await window.electron.removeGameFromPinned(game.shop, game.objectId).then(() => { - showSuccessToast(tGame("game_removed_from_pinned")); - }); + await window.electron + .removeGameFromPinned(game.shop, game.objectId) + .then(() => { + showSuccessToast(tGame("game_removed_from_pinned")); + }); } else { - await window.electron.addGameToPinned(game.shop, game.objectId).then(() => { - showSuccessToast(tGame("game_added_to_pinned")); - }); + await window.electron + .addGameToPinned(game.shop, game.objectId) + .then(() => { + showSuccessToast(tGame("game_added_to_pinned")); + }); } - - await new Promise(resolve => setTimeout(resolve, 1000)); - + + await new Promise((resolve) => setTimeout(resolve, 1000)); + await getUserLibraryGames(); } finally { setIsPinning(false); @@ -147,7 +152,11 @@ export function UserLibraryGameCard({ }} disabled={isPinning} > - {game.isPinned ? : } + {game.isPinned ? ( + + ) : ( + + )} )}
    • From b6be03cea364b30bc19fb717d8d0bcd77ecbbd9a Mon Sep 17 00:00:00 2001 From: Moyasee Date: Fri, 26 Sep 2025 17:00:50 +0300 Subject: [PATCH 6/6] fix: formatting issues --- .../src/hooks/use-section-collapse.ts | 17 +++---- .../profile-content/profile-content.scss | 4 +- .../profile-content/profile-content.tsx | 50 +++++++++---------- 3 files changed, 32 insertions(+), 39 deletions(-) diff --git a/src/renderer/src/hooks/use-section-collapse.ts b/src/renderer/src/hooks/use-section-collapse.ts index 3c534189..7cd22224 100644 --- a/src/renderer/src/hooks/use-section-collapse.ts +++ b/src/renderer/src/hooks/use-section-collapse.ts @@ -11,15 +11,12 @@ export function useSectionCollapse() { library: false, }); - const toggleSection = useCallback( - (section: keyof SectionCollapseState) => { - setCollapseState(prevState => ({ - ...prevState, - [section]: !prevState[section], - })); - }, - [] - ); + const toggleSection = useCallback((section: keyof SectionCollapseState) => { + setCollapseState((prevState) => ({ + ...prevState, + [section]: !prevState[section], + })); + }, []); return { collapseState, @@ -27,4 +24,4 @@ export function useSectionCollapse() { isPinnedCollapsed: collapseState.pinned, isLibraryCollapsed: collapseState.library, }; -} \ No newline at end of file +} diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.scss b/src/renderer/src/pages/profile/profile-content/profile-content.scss index 4ef53a6d..8f2fcf6f 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.scss +++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss @@ -81,13 +81,11 @@ justify-content: center; transition: all ease 0.2s; flex-shrink: 0; - + &:hover { color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.1); } - - } &__tabs { 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 bd7eddb3..f1bb2ab8 100644 --- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx +++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx @@ -27,8 +27,8 @@ const sectionVariants = { ease: [0.25, 0.1, 0.25, 1], opacity: { duration: 0.1 }, y: { duration: 0.1 }, - height: { duration: 0.2 } - } + height: { duration: 0.2 }, + }, }, expanded: { opacity: 1, @@ -39,16 +39,16 @@ const sectionVariants = { ease: [0.25, 0.1, 0.25, 1], opacity: { duration: 0.2, delay: 0.1 }, y: { duration: 0.3 }, - height: { duration: 0.3 } - } - } + height: { duration: 0.3 }, + }, + }, }; const gameCardVariants = { hidden: { opacity: 0, y: 20, - scale: 0.95 + scale: 0.95, }, visible: { opacity: 1, @@ -56,9 +56,9 @@ const gameCardVariants = { scale: 1, transition: { duration: 0.4, - ease: [0.25, 0.1, 0.25, 1] - } - } + ease: [0.25, 0.1, 0.25, 1], + }, + }, }; const chevronVariants = { @@ -66,16 +66,16 @@ const chevronVariants = { rotate: 0, transition: { duration: 0.2, - ease: "easeInOut" - } + ease: "easeInOut", + }, }, expanded: { rotate: 90, transition: { duration: 0.2, - ease: "easeInOut" - } - } + ease: "easeInOut", + }, + }, }; export function ProfileContent() { @@ -167,16 +167,18 @@ export function ProfileContent() { {hasAnyGames && (
    {hasPinnedGames && ( -
    +
    - + {pinnedGames.length}
    @@ -212,7 +212,7 @@ export function ProfileContent() { initial="hidden" animate="visible" transition={{ delay: index * 0.1 }} - style={{ listStyle: 'none' }} + style={{ listStyle: "none" }} > {t("library")}
    {userStats && ( - + {numberFormatter.format(userStats.libraryCount)} )} @@ -252,7 +250,7 @@ export function ProfileContent() { initial="hidden" animate="visible" transition={{ delay: index * 0.1 }} - style={{ listStyle: 'none' }} + style={{ listStyle: "none" }} >