feat: adding reviews to profile

src/renderer/src/pages/game-details/review-item.scss

@@ -8,11 +8,23 @@
 
   &__review-header {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
-    align-items: center;
+    gap: calc(globals.$spacing-unit * 1);
     margin-bottom: calc(globals.$spacing-unit * 1.5);
   }
 
+  &__review-header-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
+
+  &__review-header-bottom {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
   &__review-user {
     display: flex;
     align-items: center;

src/renderer/src/pages/game-details/review-item.tsx

@@ -126,60 +126,62 @@ export function ReviewItem({
   return (
     <div className="game-details__review-item">
       <div className="game-details__review-header">
-        <div className="game-details__review-user">
+        <div className="game-details__review-header-top">
-          <button
+          <div className="game-details__review-user">
-            onClick={() => navigate(`/profile/${review.user.id}`)}
-            title={review.user.displayName}
-          >
-            <Avatar
-              src={review.user.profileImageUrl}
-              alt={review.user.displayName || "User"}
-              size={40}
-            />
-          </button>
-          <div className="game-details__review-user-info">
             <button
-              className="game-details__review-display-name game-details__review-display-name--clickable"
+              onClick={() => navigate(`/profile/${review.user.id}`)}
-              onClick={() =>
+              title={review.user.displayName}
-                review.user.id && navigate(`/profile/${review.user.id}`)
-              }
             >
-              {review.user.displayName || "Anonymous"}
+              <Avatar
+                src={review.user.profileImageUrl}
+                alt={review.user.displayName || "User"}
+                size={40}
+              />
             </button>
-            <div className="game-details__review-meta-row">
+            <div className="game-details__review-user-info">
-              <div
+              <button
-                className="game-details__review-score-stars"
+                className="game-details__review-display-name game-details__review-display-name--clickable"
-                title={getRatingText(review.score, t)}
+                onClick={() =>
+                  review.user.id && navigate(`/profile/${review.user.id}`)
+                }
               >
-                <Star
+                {review.user.displayName || "Anonymous"}
-                  size={12}
+              </button>
-                  className="game-details__review-star game-details__review-star--filled"
-                />
-                <span className="game-details__review-score-text">
-                  {review.score}/5
-                </span>
-              </div>
-              {Boolean(
-                review.playTimeInSeconds && review.playTimeInSeconds > 0
-              ) && (
-                <div className="game-details__review-playtime">
-                  <ClockIcon size={12} />
-                  <span>
-                    {t("review_played_for")}{" "}
-                    {formatPlayTime(review.playTimeInSeconds || 0)}
-                  </span>
-                </div>
-              )}
             </div>
           </div>
-        </div>
-        <div className="game-details__review-right">
           <div className="game-details__review-date">
             {formatDistance(new Date(review.createdAt), new Date(), {
               addSuffix: true,
             })}
           </div>
         </div>
+        <div className="game-details__review-header-bottom">
+          <div className="game-details__review-meta-row">
+            <div
+              className="game-details__review-score-stars"
+              title={getRatingText(review.score, t)}
+            >
+              <Star
+                size={12}
+                className="game-details__review-star game-details__review-star--filled"
+              />
+              <span className="game-details__review-score-text">
+                {review.score}/5
+              </span>
+            </div>
+            {Boolean(
+              review.playTimeInSeconds && review.playTimeInSeconds > 0
+            ) && (
+              <div className="game-details__review-playtime">
+                <ClockIcon size={12} />
+                <span>
+                  {t("review_played_for")}{" "}
+                  {formatPlayTime(review.playTimeInSeconds || 0)}
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
       </div>
       <div>
         <div

src/renderer/src/pages/profile/profile-content/library-tab.tsx

@@ -58,7 +58,9 @@ export function LibraryTab({
       transition={{ duration: 0.2 }}
       aria-hidden={false}
     >
-      {hasAnyGames && <SortOptions sortBy={sortBy} onSortChange={onSortChange} />}
+      {hasAnyGames && (
+        <SortOptions sortBy={sortBy} onSortChange={onSortChange} />
+      )}
 
       {!hasAnyGames && (
         <div className="profile-content__no-games">
@@ -123,8 +125,9 @@ export function LibraryTab({
               >
                 <ul className="profile-content__games-grid">
                   {libraryGames?.map((game, index) => {
-                    const hasAnimated =
+                    const hasAnimated = animatedGameIdsRef.current.has(
-                      animatedGameIdsRef.current.has(game.objectId);
+                      game.objectId
+                    );
                     const isNewGame = !hasAnimated && !isLoadingLibraryGames;
 
                     return (
@@ -173,4 +176,3 @@ export function LibraryTab({
     </motion.div>
   );
 }
-

src/renderer/src/pages/profile/profile-content/profile-content.scss

@@ -235,10 +235,22 @@
 }
 
 .user-reviews__review-header {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 1);
+  margin-bottom: calc(globals.$spacing-unit * 1.5);
+}
+
+.user-reviews__review-header-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: calc(globals.$spacing-unit * 1.5);
+}
+
+.user-reviews__review-header-bottom {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .user-reviews__review-meta-row {
@@ -343,6 +355,31 @@
 .user-reviews__review-content {
   color: rgba(255, 255, 255, 0.85);
   line-height: 1.5;
+  word-wrap: break-word;
+  word-break: break-word;
+  overflow-wrap: break-word;
+  white-space: pre-wrap;
+  max-width: 100%;
+}
+
+.user-reviews__review-translation-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(globals.$spacing-unit * 1);
+  margin-top: calc(globals.$spacing-unit * 1.5);
+  padding: 0;
+  background: none;
+  border: none;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.875rem;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    text-decoration: underline;
+    color: rgba(255, 255, 255, 0.9);
+  }
 }
 
 .user-reviews__review-actions {

src/renderer/src/pages/profile/profile-content/profile-content.tsx

@@ -48,6 +48,10 @@ interface UserReview {
     objectId: string;
     shop: string;
   };
+  translations: {
+    [key: string]: string;
+  };
+  detectedLanguage: string | null;
 }
 
 interface UserReviewsResponse {

src/renderer/src/pages/profile/profile-content/profile-review-item.tsx

@@ -1,8 +1,11 @@
 import { motion, AnimatePresence } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 import { ClockIcon } from "@primer/octicons-react";
-import { Star, ThumbsUp, ThumbsDown, TrashIcon } from "lucide-react";
+import { Star, ThumbsUp, ThumbsDown, TrashIcon, Languages } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import type { GameShop } from "@types";
+import { sanitizeHtml } from "@shared";
 import { useDate } from "@renderer/hooks";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import "./profile-content.scss";
@@ -25,8 +28,12 @@ interface UserReview {
     title: string;
     iconUrl: string;
     objectId: string;
-    shop: string;
+    shop: GameShop;
   };
+  translations: {
+    [key: string]: string;
+  };
+  detectedLanguage: string | null;
 }
 
 interface ProfileReviewItemProps {
@@ -51,7 +58,32 @@ export function ProfileReviewItem({
   const navigate = useNavigate();
   const { formatDistance } = useDate();
   const { t } = useTranslation("user_profile");
-  const { t: tGameDetails } = useTranslation("game_details");
+  const { t: tGameDetails, i18n } = useTranslation("game_details");
+  const [showOriginal, setShowOriginal] = useState(false);
+
+  const getBaseLanguage = (lang: string | null) => lang?.split("-")[0] || "";
+
+  const isDifferentLanguage =
+    getBaseLanguage(review.detectedLanguage) !== getBaseLanguage(i18n.language);
+
+  const needsTranslation =
+    !isOwnReview && isDifferentLanguage && review.translations[i18n.language];
+
+  const getLanguageName = (languageCode: string | null) => {
+    if (!languageCode) return "";
+    try {
+      const displayNames = new Intl.DisplayNames([i18n.language], {
+        type: "language",
+      });
+      return displayNames.of(languageCode) || languageCode.toUpperCase();
+    } catch {
+      return languageCode.toUpperCase();
+    }
+  };
+
+  const displayContent = needsTranslation
+    ? review.translations[i18n.language]
+    : review.reviewHtml;
 
   return (
     <motion.div
@@ -62,63 +94,93 @@ export function ProfileReviewItem({
       transition={{ duration: 0.3 }}
     >
       <div className="user-reviews__review-header">
-        <div className="user-reviews__review-meta-row">
+        <div className="user-reviews__review-header-top">
-          <div
+          <div className="user-reviews__review-game">
-            className="user-reviews__review-score-stars"
+            <div className="user-reviews__game-info">
-            title={getRatingText(review.score, tGameDetails)}
+              <div className="user-reviews__game-details">
-          >
+                <img
-            <Star
+                  src={review.game.iconUrl}
-              size={12}
+                  alt={review.game.title}
-              className="user-reviews__review-star user-reviews__review-star--filled"
+                  className="user-reviews__game-icon"
-            />
+                />
-            <span className="user-reviews__review-score-text">
+                <button
-              {review.score}/5
+                  className="user-reviews__game-title user-reviews__game-title--clickable"
-            </span>
+                  onClick={() => navigate(buildGameDetailsPath(review.game))}
+                >
+                  {review.game.title}
+                </button>
+              </div>
+            </div>
           </div>
-          {Boolean(
+          <div className="user-reviews__review-date">
-            review.playTimeInSeconds && review.playTimeInSeconds > 0
+            {formatDistance(new Date(review.createdAt), new Date(), {
-          ) && (
+              addSuffix: true,
-            <div className="user-reviews__review-playtime">
+            })}
-              <ClockIcon size={12} />
+          </div>
-              <span>
+        </div>
-                {tGameDetails("review_played_for")}{" "}
+        <div className="user-reviews__review-header-bottom">
-                {formatPlayTime(review.playTimeInSeconds || 0)}
+          <div className="user-reviews__review-meta-row">
+            <div
+              className="user-reviews__review-score-stars"
+              title={getRatingText(review.score, tGameDetails)}
+            >
+              <Star
+                size={12}
+                className="user-reviews__review-star user-reviews__review-star--filled"
+              />
+              <span className="user-reviews__review-score-text">
+                {review.score}/5
               </span>
             </div>
-          )}
+            {Boolean(
-        </div>
+              review.playTimeInSeconds && review.playTimeInSeconds > 0
-        <div className="user-reviews__review-date">
+            ) && (
-          {formatDistance(new Date(review.createdAt), new Date(), {
+              <div className="user-reviews__review-playtime">
-            addSuffix: true,
+                <ClockIcon size={12} />
-          })}
+                <span>
+                  {tGameDetails("review_played_for")}{" "}
+                  {formatPlayTime(review.playTimeInSeconds || 0)}
+                </span>
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
-      <div
+      <div>
-        className="user-reviews__review-content"
+        <div
-        dangerouslySetInnerHTML={{
+          className="user-reviews__review-content"
-          __html: review.reviewHtml,
+          dangerouslySetInnerHTML={{
-        }}
+            __html: sanitizeHtml(displayContent),
-      />
+          }}
-
+        />
-      <div className="user-reviews__review-footer">
+        {needsTranslation && (
-        <div className="user-reviews__review-game">
+          <>
-          <div className="user-reviews__game-info">
+            <button
-            <div className="user-reviews__game-details">
+              className="user-reviews__review-translation-toggle"
-              <img
+              onClick={() => setShowOriginal(!showOriginal)}
-                src={review.game.iconUrl}
+            >
-                alt={review.game.title}
+              <Languages size={13} />
-                className="user-reviews__game-icon"
+              {showOriginal
+                ? tGameDetails("hide_original")
+                : tGameDetails("show_original_translated_from", {
+                    language: getLanguageName(review.detectedLanguage),
+                  })}
+            </button>
+            {showOriginal && (
+              <div
+                className="user-reviews__review-content"
+                style={{
+                  opacity: 0.6,
+                  marginTop: "12px",
+                }}
+                dangerouslySetInnerHTML={{
+                  __html: sanitizeHtml(review.reviewHtml),
+                }}
               />
-              <button
+            )}
-                className="user-reviews__game-title user-reviews__game-title--clickable"
+          </>
-                onClick={() => navigate(buildGameDetailsPath(review.game))}
+        )}
-              >
-                {review.game.title}
-              </button>
-            </div>
-          </div>
-        </div>
       </div>
 
       <div className="user-reviews__review-actions">
@@ -188,4 +250,3 @@ export function ProfileReviewItem({
     </motion.div>
   );
 }
-

src/renderer/src/pages/profile/profile-content/reviews-tab.tsx

@@ -23,6 +23,10 @@ interface UserReview {
     objectId: string;
     shop: string;
   };
+  translations: {
+    [key: string]: string;
+  };
+  detectedLanguage: string | null;
 }
 
 interface ReviewsTabProps {
@@ -89,4 +93,3 @@ export function ReviewsTab({
     </motion.div>
   );
 }
-