Fix: marked props read-only and catch error

src/renderer/src/components/star-rating/star-rating.tsx

@@ -14,8 +14,8 @@ export function StarRating({
   maxStars = 5,
   size = 12,
   showCalculating = false,
-  calculatingText = "Calculating"
+  calculatingText = "Calculating",
-}: StarRatingProps) {
+}: Readonly<StarRatingProps>) {
   if (rating === null && showCalculating) {
     return (
       <div className="star-rating star-rating--calculating">
@@ -40,22 +40,33 @@ export function StarRating({
 
   return (
     <div className="star-rating">
-
       {Array.from({ length: filledStars }, (_, index) => (
-        <StarFillIcon key={`filled-${index}`} size={size} className="star-rating__star star-rating__star--filled" />
+        <StarFillIcon
+          key={`filled-${index}`}
+          size={size}
+          className="star-rating__star star-rating__star--filled"
+        />
       ))}
 
-
       {hasHalfStar && (
         <div className="star-rating__half-star" key="half-star">
-          <StarIcon size={size} className="star-rating__star star-rating__star--empty" />
+          <StarIcon
-          <StarFillIcon size={size} className="star-rating__star star-rating__star--half" />
+            size={size}
+            className="star-rating__star star-rating__star--empty"
+          />
+          <StarFillIcon
+            size={size}
+            className="star-rating__star star-rating__star--half"
+          />
         </div>
       )}
 
-
       {Array.from({ length: emptyStars }, (_, index) => (
-        <StarIcon key={`empty-${index}`} size={size} className="star-rating__star star-rating__star--empty" />
+        <StarIcon
+          key={`empty-${index}`}
+          size={size}
+          className="star-rating__star star-rating__star--empty"
+        />
       ))}
 
       <span className="star-rating__value">{rating.toFixed(1)}</span>

src/renderer/src/pages/game-details/game-details-content.tsx

@@ -1,5 +1,10 @@
 import { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { PencilIcon, TrashIcon, ClockIcon, NoteIcon } from "@primer/octicons-react";
+import {
+  PencilIcon,
+  TrashIcon,
+  ClockIcon,
+  NoteIcon,
+} from "@primer/octicons-react";
 import { ThumbsUp, ThumbsDown, Star } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
@@ -68,12 +73,18 @@ const getSelectScoreColorClass = (score: number): string => {
 
 const getRatingText = (score: number, t: (key: string) => string): string => {
   switch (score) {
-    case 1: return t("rating_very_negative");
+    case 1:
-    case 2: return t("rating_negative");
+      return t("rating_very_negative");
-    case 3: return t("rating_neutral");
+    case 2:
-    case 4: return t("rating_positive");
+      return t("rating_negative");
-    case 5: return t("rating_very_positive");
+    case 3:
-    default: return "";
+      return t("rating_neutral");
+    case 4:
+      return t("rating_positive");
+    case 5:
+      return t("rating_very_positive");
+    default:
+      return "";
   }
 };
 
@@ -361,6 +372,7 @@ export function GameDetailsContent() {
       setShowReviewPrompt(false);
       setHasUserReviewed(true);
     } catch (error) {
+      console.error("Failed to submit review:", error);
       showErrorToast(t("review_submission_failed"));
     } finally {
       setSubmittingReview(false);
@@ -387,7 +399,7 @@ export function GameDetailsContent() {
   const handleReviewPromptLater = () => {
     setShowReviewPrompt(false);
     if (objectId) {
-      sessionStorage.setItem(`reviewPromptDismissed_${objectId}`, 'true');
+      sessionStorage.setItem(`reviewPromptDismissed_${objectId}`, "true");
     }
   };
 
@@ -663,7 +675,11 @@ export function GameDetailsContent() {
                               >
                                 <Star
                                   size={24}
-                                  fill={reviewScore && starValue <= reviewScore ? "currentColor" : "none"}
+                                  fill={
+                                    reviewScore && starValue <= reviewScore
+                                      ? "currentColor"
+                                      : "none"
+                                  }
                                 />
                               </button>
                             ))}
@@ -684,7 +700,6 @@ export function GameDetailsContent() {
                             ? t("submitting")
                             : t("submit_review")}
                         </button>
-
                       </div>
                     </div>
                   </>
@@ -774,12 +789,19 @@ export function GameDetailsContent() {
                                 </div>
                               </div>
                             </div>
-                            <div className="game-details__review-score-stars" title={getRatingText(review.score, t)}>
+                            <div
+                              className="game-details__review-score-stars"
+                              title={getRatingText(review.score, t)}
+                            >
                               {[1, 2, 3, 4, 5].map((starValue) => (
                                 <Star
                                   key={starValue}
                                   size={20}
-                                  fill={starValue <= review.score ? "currentColor" : "none"}
+                                  fill={
+                                    starValue <= review.score
+                                      ? "currentColor"
+                                      : "none"
+                                  }
                                   className={`game-details__review-star ${
                                     starValue <= review.score
                                       ? "game-details__review-star--filled"