feat: adding reviews to profile

2026-01-11 22:06:17 +00:00 · 2025-11-02 20:42:42 +00:00
parent f0dc7478cf
commit fdc3fecd6f
7 changed files with 225 additions and 104 deletions
--- a/src/renderer/src/pages/game-details/review-item.scss
+++ b/src/renderer/src/pages/game-details/review-item.scss
@@ -8,11 +8,23 @@

  &__review-header {
    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    flex-direction: column;
+    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;
--- a/src/renderer/src/pages/game-details/review-item.tsx
+++ b/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">
-          <button
-            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">
+        <div className="game-details__review-header-top">
+          <div className="game-details__review-user">
            <button
-              className="game-details__review-display-name game-details__review-display-name--clickable"
-              onClick={() =>
-                review.user.id && navigate(`/profile/${review.user.id}`)
-              }
+              onClick={() => navigate(`/profile/${review.user.id}`)}
+              title={review.user.displayName}
            >
-              {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-score-stars"
-                title={getRatingText(review.score, t)}
+            <div className="game-details__review-user-info">
+              <button
+                className="game-details__review-display-name game-details__review-display-name--clickable"
+                onClick={() =>
+                  review.user.id && navigate(`/profile/${review.user.id}`)
+                }
              >
-                <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>
-              )}
+                {review.user.displayName || "Anonymous"}
+              </button>
            </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
--- a/src/renderer/src/pages/profile/profile-content/library-tab.tsx
+++ b/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 =
-                      animatedGameIdsRef.current.has(game.objectId);
+                    const hasAnimated = animatedGameIdsRef.current.has(
+                      game.objectId
+                    );
                    const isNewGame = !hasAnimated && !isLoadingLibraryGames;

                    return (
@@ -173,4 +176,3 @@ export function LibraryTab({
    </motion.div>
  );
 }
-
--- a/src/renderer/src/pages/profile/profile-content/profile-content.scss
+++ b/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 {
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/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 {
--- a/src/renderer/src/pages/profile/profile-content/profile-review-item.tsx
+++ b/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-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 className="user-reviews__review-header-top">
+          <div className="user-reviews__review-game">
+            <div className="user-reviews__game-info">
+              <div className="user-reviews__game-details">
+                <img
+                  src={review.game.iconUrl}
+                  alt={review.game.title}
+                  className="user-reviews__game-icon"
+                />
+                <button
+                  className="user-reviews__game-title user-reviews__game-title--clickable"
+                  onClick={() => navigate(buildGameDetailsPath(review.game))}
+                >
+                  {review.game.title}
+                </button>
+              </div>
+            </div>
          </div>
-          {Boolean(
-            review.playTimeInSeconds && review.playTimeInSeconds > 0
-          ) && (
-            <div className="user-reviews__review-playtime">
-              <ClockIcon size={12} />
-              <span>
-                {tGameDetails("review_played_for")}{" "}
-                {formatPlayTime(review.playTimeInSeconds || 0)}
+          <div className="user-reviews__review-date">
+            {formatDistance(new Date(review.createdAt), new Date(), {
+              addSuffix: true,
+            })}
+          </div>
+        </div>
+        <div className="user-reviews__review-header-bottom">
+          <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>
-          )}
-        </div>
-        <div className="user-reviews__review-date">
-          {formatDistance(new Date(review.createdAt), new Date(), {
-            addSuffix: true,
-          })}
+            {Boolean(
+              review.playTimeInSeconds && review.playTimeInSeconds > 0
+            ) && (
+              <div className="user-reviews__review-playtime">
+                <ClockIcon size={12} />
+                <span>
+                  {tGameDetails("review_played_for")}{" "}
+                  {formatPlayTime(review.playTimeInSeconds || 0)}
+                </span>
+              </div>
+            )}
+          </div>
        </div>
      </div>

-      <div
-        className="user-reviews__review-content"
-        dangerouslySetInnerHTML={{
-          __html: review.reviewHtml,
-        }}
-      />
-
-      <div className="user-reviews__review-footer">
-        <div className="user-reviews__review-game">
-          <div className="user-reviews__game-info">
-            <div className="user-reviews__game-details">
-              <img
-                src={review.game.iconUrl}
-                alt={review.game.title}
-                className="user-reviews__game-icon"
+      <div>
+        <div
+          className="user-reviews__review-content"
+          dangerouslySetInnerHTML={{
+            __html: sanitizeHtml(displayContent),
+          }}
+        />
+        {needsTranslation && (
+          <>
+            <button
+              className="user-reviews__review-translation-toggle"
+              onClick={() => setShowOriginal(!showOriginal)}
+            >
+              <Languages size={13} />
+              {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>
  );
 }
-
--- a/src/renderer/src/pages/profile/profile-content/reviews-tab.tsx
+++ b/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>
  );
 }
-