-
{formatDistance(new Date(review.createdAt), new Date(), {
addSuffix: true,
})}
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 ffdf6a45..d41e3530 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.scss
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss
@@ -117,12 +117,30 @@
font-size: 14px;
font-weight: 500;
transition: color ease 0.2s;
+ display: flex;
+ align-items: center;
+ gap: calc(globals.$spacing-unit * 0.5);
&--active {
color: white;
}
}
+ &__tab-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 18px;
+ height: 18px;
+ padding: 0 6px;
+ background-color: rgba(255, 255, 255, 0.15);
+ border-radius: 9px;
+ font-size: 11px;
+ font-weight: 600;
+ color: rgba(255, 255, 255, 0.9);
+ line-height: 1;
+ }
+
&__tab-underline {
position: absolute;
bottom: -1px;
@@ -209,7 +227,7 @@
.user-reviews__list {
display: flex;
flex-direction: column;
- gap: calc(globals.$spacing-unit * 2);
+ gap: calc(globals.$spacing-unit * 4);
}
.user-reviews__review-item {
@@ -219,10 +237,16 @@
.user-reviews__review-header {
display: flex;
justify-content: space-between;
- align-items: center;
+ align-items: flex-start;
margin-bottom: calc(globals.$spacing-unit * 1.5);
}
+.user-reviews__review-meta-row {
+ display: flex;
+ align-items: center;
+ gap: calc(globals.$spacing-unit * 0.75);
+}
+
.user-reviews__review-footer {
display: flex;
justify-content: space-between;
@@ -267,18 +291,53 @@
}
.user-reviews__review-date {
+ display: flex;
+ align-items: center;
+ gap: 4px;
color: rgba(255, 255, 255, 0.6);
font-size: globals.$small-font-size;
}
.user-reviews__review-score-stars {
display: flex;
- gap: calc(globals.$spacing-unit * 0.5);
+ align-items: center;
+ gap: 4px;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+ padding: 2px 6px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
+ font-size: 11px;
+ font-weight: 500;
}
-.user-reviews__review-star-container {
+.user-reviews__review-star {
+ color: rgba(255, 255, 255, 0.7);
+ transition: color 0.2s ease;
+
+ &--filled {
+ color: rgba(255, 255, 255, 0.7);
+
+ svg {
+ fill: currentColor;
+ }
+ }
+}
+
+.user-reviews__review-score-text {
+ font-weight: 500;
+}
+
+.user-reviews__review-playtime {
display: flex;
align-items: center;
+ gap: 4px;
+ color: rgba(255, 255, 255, 0.7);
+ font-size: 11px;
+ font-weight: 500;
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 8px;
+ padding: 2px 6px;
+ border: 1px solid rgba(255, 255, 255, 0.1);
}
.user-reviews__review-content {
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 749c7588..7ef486d4 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -1,5 +1,12 @@
import { userProfileContext } from "@renderer/context";
-import { useContext, useEffect, useMemo, useRef, useState } from "react";
+import {
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
import { ProfileHero } from "../profile-hero/profile-hero";
import {
useAppDispatch,
@@ -22,12 +29,13 @@ import { SortOptions } from "./sort-options";
import { motion, AnimatePresence } from "framer-motion";
import { useNavigate } from "react-router-dom";
import { buildGameDetailsPath } from "@renderer/helpers";
+import { ClockIcon } from "@primer/octicons-react";
import { Star, ThumbsUp, ThumbsDown, TrashIcon } from "lucide-react";
import type { GameShop } from "@types";
import { DeleteReviewModal } from "@renderer/pages/game-details/modals/delete-review-modal";
import { GAME_STATS_ANIMATION_DURATION_IN_MS } from "./profile-animations";
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
-import "react-loading-skeleton/dist/skeleton.css";
+import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
+import InfiniteScroll from "react-infinite-scroll-component";
import "./profile-content.scss";
type SortOption = "playtime" | "achievementCount" | "playedRecently";
@@ -36,6 +44,7 @@ interface UserReview {
id: string;
reviewHtml: string;
score: number;
+ playTimeInSeconds?: number;
upvotes: number;
downvotes: number;
hasUpvoted: boolean;
@@ -58,11 +67,21 @@ interface UserReviewsResponse {
reviews: UserReview[];
}
-const getScoreColorClass = (score: number) => {
- if (score >= 1 && score <= 2) return "game-details__review-score--red";
- if (score === 3) return "game-details__review-score--yellow";
- if (score >= 4 && score <= 5) return "game-details__review-score--green";
- return "";
+const getRatingText = (score: number, t: (key: string) => string): string => {
+ switch (score) {
+ case 1:
+ return t("rating_very_negative");
+ case 2:
+ return t("rating_negative");
+ case 3:
+ return t("rating_neutral");
+ case 4:
+ return t("rating_positive");
+ case 5:
+ return t("rating_very_positive");
+ default:
+ return "";
+ }
};
export function ProfileContent() {
@@ -98,6 +117,21 @@ export function ProfileContent() {
const dispatch = useAppDispatch();
const { t } = useTranslation("user_profile");
+ const { t: tGameDetails } = useTranslation("game_details");
+ const { numberFormatter } = useFormat();
+
+ const formatPlayTime = (playTimeInSeconds: number) => {
+ const minutes = playTimeInSeconds / 60;
+
+ if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+ return t("amount_minutes", {
+ amount: minutes.toFixed(0),
+ });
+ }
+
+ const hours = minutes / 60;
+ return t("amount_hours", { amount: numberFormatter.format(hours) });
+ };
useEffect(() => {
dispatch(setHeaderTitle(""));
@@ -109,67 +143,32 @@ export function ProfileContent() {
useEffect(() => {
if (userProfile) {
+ // When sortBy changes, clear animated games so all games animate in
+ if (currentSortByRef.current !== sortBy) {
+ animatedGameIdsRef.current.clear();
+ currentSortByRef.current = sortBy;
+ }
getUserLibraryGames(sortBy, true);
}
}, [sortBy, getUserLibraryGames, userProfile]);
- const loadMoreRef = useRef(null);
- const observerRef = useRef(null);
+ const animatedGameIdsRef = useRef>(new Set());
+ const currentSortByRef = useRef(sortBy);
- useEffect(() => {
- if (activeTab !== "library" || !hasMoreLibraryGames) {
- return;
+ const handleLoadMore = useCallback(() => {
+ if (
+ activeTab === "library" &&
+ hasMoreLibraryGames &&
+ !isLoadingLibraryGames
+ ) {
+ loadMoreLibraryGames(sortBy);
}
-
- // Clean up previous observer
- if (observerRef.current) {
- observerRef.current.disconnect();
- observerRef.current = null;
- }
-
- // Use setTimeout to ensure the DOM element is available after render
- const timeoutId = setTimeout(() => {
- const currentRef = loadMoreRef.current;
- if (!currentRef) {
- return;
- }
-
- const observer = new IntersectionObserver(
- (entries) => {
- const entry = entries[0];
- if (
- entry?.isIntersecting &&
- hasMoreLibraryGames &&
- !isLoadingLibraryGames
- ) {
- loadMoreLibraryGames(sortBy);
- }
- },
- {
- root: null,
- rootMargin: "200px",
- threshold: 0.1,
- }
- );
-
- observerRef.current = observer;
- observer.observe(currentRef);
- }, 100);
-
- return () => {
- clearTimeout(timeoutId);
- if (observerRef.current) {
- observerRef.current.disconnect();
- observerRef.current = null;
- }
- };
}, [
activeTab,
hasMoreLibraryGames,
isLoadingLibraryGames,
loadMoreLibraryGames,
sortBy,
- libraryGames.length,
]);
// Clear reviews state and reset tab when switching users
@@ -368,8 +367,6 @@ export function ProfileContent() {
};
}, [setStatsIndex, isAnimationRunning]);
- const { numberFormatter } = useFormat();
-
const usersAreFriends = useMemo(() => {
return userProfile?.relation?.status === "ACCEPTED";
}, [userProfile]);
@@ -423,6 +420,11 @@ export function ProfileContent() {
onClick={() => setActiveTab("reviews")}
>
{t("user_reviews")}
+ {reviewsTotalCount > 0 && (
+
+ {reviewsTotalCount}
+
+ )}
{activeTab === "reviews" && (
-
- {libraryGames?.map((game) => (
- -
-
-
- ))}
-
- {hasMoreLibraryGames && (
-
- )}
- {isLoadingLibraryGames && (
-
-
- {Array.from({ length: 12 }).map((_, i) => (
- -
+
+ {libraryGames?.map((game, index) => {
+ const hasAnimated =
+ animatedGameIdsRef.current.has(game.objectId);
+ const isNewGame =
+ !hasAnimated && !isLoadingLibraryGames;
+
+ return (
+ {
+ if (isNewGame) {
+ animatedGameIdsRef.current.add(
+ game.objectId
+ );
+ }
+ }}
>
-
-
- ))}
-
-
- )}
+
+ );
+ })}
+
+
)}
@@ -579,18 +591,6 @@ export function ProfileContent() {
transition={{ duration: 0.2 }}
aria-hidden={false}
>
-