feat: Added karma to user profile, added warning modal before deleting review, fixed sorting buttons for reviews

src/locales/en/translation.json

@@ -317,7 +317,11 @@
     "caption": "Caption",
     "audio": "Audio",
     "filter_by_source": "Filter by source",
-    "no_repacks_found": "No sources found for this game"
+    "no_repacks_found": "No sources found for this game",
+"delete_review": "Delete review",
+    "delete_review_modal_title": "Delete Review",
+    "delete_review_modal_description": "Are you sure you want to delete your review? This action cannot be undone.",
+    "delete_review_karma_warning": "You will lose any karma points earned from this review."
   },
   "activation": {
     "title": "Activate Hydra",
@@ -624,7 +628,10 @@
     "error_adding_friend": "Could not send friend request. Please check friend code",
     "friend_code_length_error": "Friend code must have 8 characters",
     "game_removed_from_pinned": "Game removed from pinned",
-    "game_added_to_pinned": "Game added to pinned"
+    "game_added_to_pinned": "Game added to pinned",
+    "karma": "Karma",
+    "karma_count": "karma",
+    "karma_description": "Earned from positive likes on your reviews"
   },
   "achievement": {
     "achievement_unlocked": "Achievement unlocked",

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

@@ -4,16 +4,13 @@ import { ThumbsUp, ThumbsDown } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
-import Bold from "@tiptap/extension-bold";
-import Italic from "@tiptap/extension-italic";
-import Underline from "@tiptap/extension-underline";
 import type { GameReview } from "@types";
 
 import { HeroPanel } from "./hero";
 import { DescriptionHeader } from "./description-header/description-header";
 import { GallerySlider } from "./gallery-slider/gallery-slider";
 import { Sidebar } from "./sidebar/sidebar";
-import { EditGameModal } from "./modals";
+import { EditGameModal, DeleteReviewModal } from "./modals";
 import { ReviewSortOptions } from "./review-sort-options";
 import { ReviewPromptBanner } from "./review-prompt-banner";
 
@@ -98,6 +95,8 @@ export function GameDetailsContent() {
 
   const [backdropOpacity, setBackdropOpacity] = useState(1);
   const [showEditGameModal, setShowEditGameModal] = useState(false);
+  const [showDeleteReviewModal, setShowDeleteReviewModal] = useState(false);
+  const [reviewToDelete, setReviewToDelete] = useState<string | null>(null);
   const [isDescriptionExpanded, setIsDescriptionExpanded] = useState(false);
 
   // Reviews state management
@@ -121,7 +120,7 @@ export function GameDetailsContent() {
 
   // Tiptap editor for review input
   const editor = useEditor({
-    extensions: [StarterKit, Bold, Italic, Underline],
+    extensions: [StarterKit],
     content: "",
     editorProps: {
       attributes: {
@@ -239,12 +238,19 @@ export function GameDetailsContent() {
   };
 
   const handleDeleteReview = async (reviewId: string) => {
-    if (!objectId) return;
+    setReviewToDelete(reviewId);
+    setShowDeleteReviewModal(true);
+  };
+
+  const confirmDeleteReview = async () => {
+    if (!objectId || !reviewToDelete) return;
 
     try {
-      await window.electron.deleteReview(shop, objectId, reviewId);
+      await window.electron.deleteReview(shop, objectId, reviewToDelete);
       // Reload reviews after deletion
       loadReviews(true);
+      setShowDeleteReviewModal(false);
+      setReviewToDelete(null);
     } catch (error) {
       console.error("Failed to delete review:", error);
     }
@@ -469,7 +475,8 @@ export function GameDetailsContent() {
         <div className="game-details__description-container">
           <div className="game-details__description-content">
             {/* Review Prompt Banner */}
-            {showReviewPrompt &&
+            {game?.shop !== "custom" &&
+              showReviewPrompt &&
               userDetails &&
               game?.playTimeInMilliseconds &&
               !hasUserReviewed &&
@@ -504,260 +511,262 @@ export function GameDetailsContent() {
               </button>
             )}
 
-            <div className="game-details__reviews-section">
-              {showReviewForm && (
-                <>
-                  <div className="game-details__reviews-header">
-                    <h3 className="game-details__reviews-title">
-                      {t("leave_a_review")}
-                    </h3>
-                  </div>
+            {game?.shop !== "custom" && (
+              <div className="game-details__reviews-section">
+                {showReviewForm && (
+                  <>
+                    <div className="game-details__reviews-header">
+                      <h3 className="game-details__reviews-title">
+                        {t("leave_a_review")}
+                      </h3>
+                    </div>
+
+                    <div className="game-details__review-form">
+                      <div className="game-details__review-input-container">
+                        <EditorContent
+                          editor={editor}
+                          className="game-details__review-input"
+                        />
+                        <div className="game-details__review-input-bottom">
+                          <div className="game-details__review-editor-toolbar">
+                            <button
+                              type="button"
+                              onClick={() =>
+                                editor?.chain().focus().toggleBold().run()
+                              }
+                              className={`game-details__editor-button ${editor?.isActive("bold") ? "is-active" : ""}`}
+                              disabled={!editor}
+                            >
+                              <strong>B</strong>
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() =>
+                                editor?.chain().focus().toggleItalic().run()
+                              }
+                              className={`game-details__editor-button ${editor?.isActive("italic") ? "is-active" : ""}`}
+                              disabled={!editor}
+                            >
+                              <em>I</em>
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() =>
+                                editor?.chain().focus().toggleUnderline().run()
+                              }
+                              className={`game-details__editor-button ${editor?.isActive("underline") ? "is-active" : ""}`}
+                              disabled={!editor}
+                            >
+                              <u>U</u>
+                            </button>
+                          </div>
 
-                  <div className="game-details__review-form">
-                    <div className="game-details__review-input-container">
-                      <EditorContent
-                        editor={editor}
-                        className="game-details__review-input"
-                      />
-                      <div className="game-details__review-input-bottom">
-                        <div className="game-details__review-editor-toolbar">
                           <button
-                            type="button"
-                            onClick={() =>
-                              editor?.chain().focus().toggleBold().run()
+                            className="game-details__review-submit-button"
+                            onClick={handleSubmitReview}
+                            disabled={
+                              !editor?.getHTML().trim() || submittingReview
                             }
-                            className={`game-details__editor-button ${editor?.isActive("bold") ? "is-active" : ""}`}
-                            disabled={!editor}
                           >
-                            <strong>B</strong>
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() =>
-                              editor?.chain().focus().toggleItalic().run()
-                            }
-                            className={`game-details__editor-button ${editor?.isActive("italic") ? "is-active" : ""}`}
-                            disabled={!editor}
-                          >
-                            <em>I</em>
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() =>
-                              editor?.chain().focus().toggleUnderline().run()
-                            }
-                            className={`game-details__editor-button ${editor?.isActive("underline") ? "is-active" : ""}`}
-                            disabled={!editor}
-                          >
-                            <u>U</u>
+                            {submittingReview
+                              ? t("submitting")
+                              : t("submit_review")}
                           </button>
                         </div>
+                      </div>
 
-                        <button
-                          className="game-details__review-submit-button"
-                          onClick={handleSubmitReview}
-                          disabled={
-                            !editor?.getHTML().trim() || submittingReview
-                          }
-                        >
-                          {submittingReview
-                            ? t("submitting")
-                            : t("submit_review")}
-                        </button>
+                      <div className="game-details__review-form-bottom">
+                        <div className="game-details__review-score-container">
+                          <label className="game-details__review-score-label">
+                            {t("rating")}
+                          </label>
+                          <select
+                            className="game-details__review-score-select"
+                            value={reviewScore}
+                            onChange={(e) =>
+                              setReviewScore(Number(e.target.value))
+                            }
+                          >
+                            <option value={1}>1/10</option>
+                            <option value={2}>2/10</option>
+                            <option value={3}>3/10</option>
+                            <option value={4}>4/10</option>
+                            <option value={5}>5/10</option>
+                            <option value={6}>6/10</option>
+                            <option value={7}>7/10</option>
+                            <option value={8}>8/10</option>
+                            <option value={9}>9/10</option>
+                            <option value={10}>10/10</option>
+                          </select>
+                        </div>
                       </div>
                     </div>
+                  </>
+                )}
 
-                    <div className="game-details__review-form-bottom">
-                      <div className="game-details__review-score-container">
-                        <label className="game-details__review-score-label">
-                          {t("rating")}
-                        </label>
-                        <select
-                          className="game-details__review-score-select"
-                          value={reviewScore}
-                          onChange={(e) =>
-                            setReviewScore(Number(e.target.value))
-                          }
-                        >
-                          <option value={1}>1/10</option>
-                          <option value={2}>2/10</option>
-                          <option value={3}>3/10</option>
-                          <option value={4}>4/10</option>
-                          <option value={5}>5/10</option>
-                          <option value={6}>6/10</option>
-                          <option value={7}>7/10</option>
-                          <option value={8}>8/10</option>
-                          <option value={9}>9/10</option>
-                          <option value={10}>10/10</option>
-                        </select>
-                      </div>
+                {showReviewForm && (
+                  <div className="game-details__reviews-separator"></div>
+                )}
+
+                <div className="game-details__reviews-list">
+                  <div className="game-details__reviews-list-header">
+                    <div className="game-details__reviews-title-group">
+                      <h3 className="game-details__reviews-title">
+                        {t("reviews")}
+                      </h3>
+                      <span className="game-details__reviews-badge">
+                        {totalReviewCount}
+                      </span>
                     </div>
                   </div>
-                </>
-              )}
-
-              {showReviewForm && (
-                <div className="game-details__reviews-separator"></div>
-              )}
-
-              <div className="game-details__reviews-list">
-                <div className="game-details__reviews-list-header">
-                  <div className="game-details__reviews-title-group">
-                    <h3 className="game-details__reviews-title">
-                      {t("reviews")}
-                    </h3>
-                    <span className="game-details__reviews-badge">
-                      {totalReviewCount}
-                    </span>
-                  </div>
                   <ReviewSortOptions
                     sortBy={reviewsSortBy as any}
                     onSortChange={handleSortChange}
                   />
-                </div>
 
-                {reviewsLoading && reviews.length === 0 && (
-                  <div className="game-details__reviews-loading">
-                    {t("loading_reviews")}
-                  </div>
-                )}
+                  {reviewsLoading && reviews.length === 0 && (
+                    <div className="game-details__reviews-loading">
+                      {t("loading_reviews")}
+                    </div>
+                  )}
 
-                {!reviewsLoading && reviews.length === 0 && (
-                  <div className="game-details__reviews-empty">
-                    <div className="game-details__reviews-empty-icon">📝</div>
-                    <h4 className="game-details__reviews-empty-title">
-                      {t("no_reviews_yet")}
-                    </h4>
-                    <p className="game-details__reviews-empty-message">
-                      {t("be_first_to_review")}
-                    </p>
-                  </div>
-                )}
+                  {!reviewsLoading && reviews.length === 0 && (
+                    <div className="game-details__reviews-empty">
+                      <div className="game-details__reviews-empty-icon">📝</div>
+                      <h4 className="game-details__reviews-empty-title">
+                        {t("no_reviews_yet")}
+                      </h4>
+                      <p className="game-details__reviews-empty-message">
+                        {t("be_first_to_review")}
+                      </p>
+                    </div>
+                  )}
 
-                {reviews.map((review, index) => (
-                  <div key={index} className="game-details__review-item">
-                    {review.isBlocked &&
-                    !visibleBlockedReviews.has(review.id) ? (
-                      <div className="game-details__blocked-review-simple">
-                        Review from blocked user —
-                        <button
-                          className="game-details__blocked-review-show-link"
-                          onClick={() => toggleBlockedReview(review.id)}
-                        >
-                          Show
-                        </button>
-                      </div>
-                    ) : (
-                      <>
-                        <div className="game-details__review-header">
-                          <div className="game-details__review-user">
-                            {review.user?.profileImageUrl && (
-                              <img
-                                src={review.user.profileImageUrl}
-                                alt={review.user.displayName || "User"}
-                                className="game-details__review-avatar"
-                              />
-                            )}
-                            <div className="game-details__review-user-info">
-                              <div
-                                className="game-details__review-display-name game-details__review-display-name--clickable"
-                                onClick={() =>
-                                  review.user?.id &&
-                                  navigate(`/profile/${review.user.id}`)
-                                }
-                                onKeyDown={(e) => {
-                                  if (e.key === "Enter" || e.key === " ") {
-                                    e.preventDefault();
+                  {reviews.map((review, index) => (
+                    <div key={index} className="game-details__review-item">
+                      {review.isBlocked &&
+                      !visibleBlockedReviews.has(review.id) ? (
+                        <div className="game-details__blocked-review-simple">
+                          Review from blocked user —
+                          <button
+                            className="game-details__blocked-review-show-link"
+                            onClick={() => toggleBlockedReview(review.id)}
+                          >
+                            Show
+                          </button>
+                        </div>
+                      ) : (
+                        <>
+                          <div className="game-details__review-header">
+                            <div className="game-details__review-user">
+                              {review.user?.profileImageUrl && (
+                                <img
+                                  src={review.user.profileImageUrl}
+                                  alt={review.user.displayName || "User"}
+                                  className="game-details__review-avatar"
+                                />
+                              )}
+                              <div className="game-details__review-user-info">
+                                <div
+                                  className="game-details__review-display-name game-details__review-display-name--clickable"
+                                  onClick={() =>
                                     review.user?.id &&
-                                      navigate(`/profile/${review.user.id}`);
+                                    navigate(`/profile/${review.user.id}`)
                                   }
-                                }}
-                                role="button"
-                                tabIndex={0}
-                              >
-                                {review.user?.displayName || "Anonymous"}
-                              </div>
-                              <div className="game-details__review-date">
-                                <ClockIcon size={12} />
-                                {formatDistance(
-                                  new Date(review.createdAt),
-                                  new Date(),
-                                  { addSuffix: true }
-                                )}
+                                  onKeyDown={(e) => {
+                                    if (e.key === "Enter" || e.key === " ") {
+                                      e.preventDefault();
+                                      review.user?.id &&
+                                        navigate(`/profile/${review.user.id}`);
+                                    }
+                                  }}
+                                  role="button"
+                                  tabIndex={0}
+                                >
+                                  {review.user?.displayName || "Anonymous"}
+                                </div>
+                                <div className="game-details__review-date">
+                                  <ClockIcon size={12} />
+                                  {formatDistance(
+                                    new Date(review.createdAt),
+                                    new Date(),
+                                    { addSuffix: true }
+                                  )}
+                                </div>
                               </div>
                             </div>
+                            <div className="game-details__review-score">
+                              {review.score}/10
+                            </div>
                           </div>
-                          <div className="game-details__review-score">
-                            {review.score}/10
-                          </div>
-                        </div>
-                        <div
-                          className="game-details__review-content"
-                          dangerouslySetInnerHTML={{
-                            __html: review.reviewHtml,
-                          }}
-                        />
-                        <div className="game-details__review-actions">
-                          <div className="game-details__review-votes">
-                            <button
-                              className={`game-details__vote-button game-details__vote-button--upvote ${review.hasUpvoted ? "game-details__vote-button--active" : ""}`}
-                              onClick={() =>
-                                handleVoteReview(review.id, "upvote")
-                              }
-                            >
-                              <ThumbsUp size={16} />
-                              <span>{review.upvotes || 0}</span>
-                            </button>
-                            <button
-                              className={`game-details__vote-button game-details__vote-button--downvote ${review.hasDownvoted ? "game-details__vote-button--active" : ""}`}
-                              onClick={() =>
-                                handleVoteReview(review.id, "downvote")
-                              }
-                            >
-                              <ThumbsDown size={16} />
-                              <span>{review.downvotes || 0}</span>
-                            </button>
-                          </div>
-                          {userDetails?.id === review.user?.id && (
-                            <button
-                              className="game-details__delete-review-button"
-                              onClick={() => handleDeleteReview(review.id)}
-                              title={t("delete_review")}
-                            >
-                              <TrashIcon size={16} />
-                            </button>
-                          )}
-                          {review.isBlocked &&
-                            visibleBlockedReviews.has(review.id) && (
+                          <div
+                            className="game-details__review-content"
+                            dangerouslySetInnerHTML={{
+                              __html: review.reviewHtml,
+                            }}
+                          />
+                          <div className="game-details__review-actions">
+                            <div className="game-details__review-votes">
                               <button
-                                className="game-details__blocked-review-hide-link"
-                                onClick={() => toggleBlockedReview(review.id)}
+                                className={`game-details__vote-button game-details__vote-button--upvote ${review.hasUpvoted ? "game-details__vote-button--active" : ""}`}
+                                onClick={() =>
+                                  handleVoteReview(review.id, "upvote")
+                                }
                               >
-                                Hide
+                                <ThumbsUp size={16} />
+                                <span>{review.upvotes || 0}</span>
+                              </button>
+                              <button
+                                className={`game-details__vote-button game-details__vote-button--downvote ${review.hasDownvoted ? "game-details__vote-button--active" : ""}`}
+                                onClick={() =>
+                                  handleVoteReview(review.id, "downvote")
+                                }
+                              >
+                                <ThumbsDown size={16} />
+                                <span>{review.downvotes || 0}</span>
+                              </button>
+                            </div>
+                            {userDetails?.id === review.user?.id && (
+                              <button
+                                className="game-details__delete-review-button"
+                                onClick={() => handleDeleteReview(review.id)}
+                                title={t("delete_review")}
+                              >
+                                <TrashIcon size={16} />
                               </button>
                             )}
-                        </div>
-                      </>
-                    )}
-                  </div>
-                ))}
+                            {review.isBlocked &&
+                              visibleBlockedReviews.has(review.id) && (
+                                <button
+                                  className="game-details__blocked-review-hide-link"
+                                  onClick={() => toggleBlockedReview(review.id)}
+                                >
+                                  Hide
+                                </button>
+                              )}
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  ))}
 
-                {hasMoreReviews && !reviewsLoading && (
-                  <button
-                    className="game-details__load-more-reviews"
-                    onClick={loadMoreReviews}
-                  >
-                    {t("load_more_reviews")}
-                  </button>
-                )}
+                  {hasMoreReviews && !reviewsLoading && (
+                    <button
+                      className="game-details__load-more-reviews"
+                      onClick={loadMoreReviews}
+                    >
+                      {t("load_more_reviews")}
+                    </button>
+                  )}
 
-                {reviewsLoading && reviews.length > 0 && (
-                  <div className="game-details__reviews-loading">
-                    {t("loading_more_reviews")}
-                  </div>
-                )}
+                  {reviewsLoading && reviews.length > 0 && (
+                    <div className="game-details__reviews-loading">
+                      {t("loading_more_reviews")}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
+            )}
           </div>
 
           {game?.shop !== "custom" && <Sidebar />}
@@ -773,6 +782,15 @@ export function GameDetailsContent() {
           onGameUpdated={handleGameUpdated}
         />
       )}
+
+      <DeleteReviewModal
+        visible={showDeleteReviewModal}
+        onClose={() => {
+          setShowDeleteReviewModal(false);
+          setReviewToDelete(null);
+        }}
+        onConfirm={confirmDeleteReview}
+      />
     </div>
   );
 }

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

@@ -196,7 +196,6 @@ $hero-height: 300px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: calc(globals.$spacing-unit * 2);
     padding-bottom: calc(globals.$spacing-unit * 1);
   }
 
@@ -850,7 +849,6 @@ $hero-height: 300px;
     justify-content: space-between;
     align-items: center;
     margin-bottom: calc(globals.$spacing-unit * 2);
-    gap: calc(globals.$spacing-unit * 2);
 
     @media (max-width: 768px) {
       flex-direction: column;

src/renderer/src/pages/game-details/modals/delete-review-modal.scss

@@ -0,0 +1,19 @@
+@use "../../../scss/globals.scss";
+
+.delete-review-modal {
+  &__karma-warning {
+    background-color: rgba(255, 193, 7, 0.1);
+    border: 1px solid rgba(255, 193, 7, 0.3);
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 16px;
+    color: #ffc107;
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  &__actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+}

src/renderer/src/pages/game-details/modals/delete-review-modal.tsx

@@ -0,0 +1,45 @@
+import { useTranslation } from "react-i18next";
+import { Button, Modal } from "@renderer/components";
+import "./delete-review-modal.scss";
+
+interface DeleteReviewModalProps {
+  visible: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteReviewModal({
+  visible,
+  onClose,
+  onConfirm,
+}: DeleteReviewModalProps) {
+  const { t } = useTranslation("game_details");
+
+  const handleDeleteReview = () => {
+    onConfirm();
+    onClose();
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      title={t("delete_review_modal_title")}
+      description={t("delete_review_modal_description")}
+      onClose={onClose}
+    >
+      <div className="delete-review-modal__karma-warning">
+        {t("delete_review_karma_warning")}
+      </div>
+      
+      <div className="delete-review-modal__actions">
+        <Button onClick={onClose} theme="outline">
+          {t("cancel")}
+        </Button>
+
+        <Button onClick={handleDeleteReview} theme="primary">
+          {t("delete")}
+        </Button>
+      </div>
+    </Modal>
+  );
+}

src/renderer/src/pages/game-details/modals/index.ts

@@ -2,3 +2,4 @@ export * from "./repacks-modal";
 export * from "./download-settings-modal";
 export * from "./game-options-modal";
 export * from "./edit-game-modal";
+export * from "./delete-review-modal";

src/renderer/src/pages/game-details/review-sort-options.scss

@@ -6,6 +6,7 @@
     flex-direction: column;
     align-items: flex-start;
     gap: calc(globals.$spacing-unit);
+    margin-bottom: calc(globals.$spacing-unit * 3);
   }
 
   &__label {
@@ -37,7 +38,7 @@
     transition: all ease 0.2s;
     display: flex;
     align-items: center;
-    gap: 6px;
+    gap: 4px;
 
     &:hover:not(:disabled) {
       color: rgba(255, 255, 255, 0.6);
@@ -61,21 +62,6 @@
     }
   }
 
-  &__toggle-option {
-    &.active {
-      background: rgba(255, 255, 255, 0.05);
-      border-radius: 4px;
-      padding: 6px 8px;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-
-    &:hover:not(:disabled) {
-      background: rgba(255, 255, 255, 0.03);
-      border-radius: 4px;
-      padding: 6px 8px;
-    }
-  }
-
   &__separator {
     color: rgba(255, 255, 255, 0.3);
     font-size: 14px;

src/renderer/src/pages/game-details/review-sort-options.tsx

@@ -49,16 +49,30 @@ export function ReviewSortOptions({
           className={`review-sort-options__option review-sort-options__toggle-option ${isDateActive ? "active" : ""}`}
           onClick={handleDateToggle}
         >
-          {sortBy === "newest" ? <ChevronDownIcon size={16} /> : <ChevronUpIcon size={16} />}
-          <span>{sortBy === "oldest" ? t("sort_oldest") : t("sort_newest")}</span>
+          {sortBy === "newest" ? (
+            <ChevronDownIcon size={16} />
+          ) : (
+            <ChevronUpIcon size={16} />
+          )}
+          <span>
+            {sortBy === "oldest" ? t("sort_oldest") : t("sort_newest")}
+          </span>
         </button>
         <span className="review-sort-options__separator">|</span>
         <button
           className={`review-sort-options__option review-sort-options__toggle-option ${isScoreActive ? "active" : ""}`}
           onClick={handleScoreToggle}
         >
-          {sortBy === "score_high" ? <ChevronDownIcon size={16} /> : <ChevronUpIcon size={16} />}
-          <span>{sortBy === "score_low" ? t("sort_lowest_score") : t("sort_highest_score")}</span>
+          {sortBy === "score_high" ? (
+            <ChevronDownIcon size={16} />
+          ) : (
+            <ChevronUpIcon size={16} />
+          )}
+          <span>
+            {sortBy === "score_low"
+              ? t("sort_lowest_score")
+              : t("sort_highest_score")}
+          </span>
         </button>
         <span className="review-sort-options__separator">|</span>
         <button

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

@@ -10,6 +10,7 @@ import { ReportProfile } from "../report-profile/report-profile";
 import { FriendsBox } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
+import { UserKarmaBox } from "./user-karma-box";
 import { UserLibraryGameCard } from "./user-library-game-card";
 import { SortOptions } from "./sort-options";
 import { useSectionCollapse } from "@renderer/hooks/use-section-collapse";
@@ -223,6 +224,7 @@ export function ProfileContent() {
         {shouldShowRightContent && (
           <div className="profile-content__right-content">
             <UserStatsBox />
+            <UserKarmaBox />
             <RecentGamesBox />
             <FriendsBox />
             <ReportProfile />

src/renderer/src/pages/profile/profile-content/user-karma-box.scss

@@ -0,0 +1,47 @@
+@use "../../../scss/globals.scss";
+
+.user-karma {
+  &__box {
+    background-color: globals.$background-color;
+    border-radius: 4px;
+    border: solid 1px globals.$border-color;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__section-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 1.5);
+  }
+
+  &__stats-row {
+    display: flex;
+    align-items: center;
+    color: globals.$body-color;
+  }
+
+  &__description {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+    font-weight: 600;
+    font-size: 1.1rem;
+  }
+
+  &__info {
+    padding-top: calc(globals.$spacing-unit * 0.5);
+  }
+
+  &__info-text {
+    color: globals.$muted-color;
+    font-size: 0.85rem;
+    line-height: 1.4;
+  }
+}

src/renderer/src/pages/profile/profile-content/user-karma-box.tsx

@@ -0,0 +1,40 @@
+import { useContext } from "react";
+import { userProfileContext } from "@renderer/context";
+import { useTranslation } from "react-i18next";
+import { useFormat } from "@renderer/hooks";
+import { Award } from "lucide-react";
+import { useUserDetails } from "@renderer/hooks";
+import "./user-karma-box.scss";
+
+export function UserKarmaBox() {
+  const { isMe } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
+  const { t } = useTranslation("user_profile");
+  const { numberFormatter } = useFormat();
+
+  // Only show karma for the current user (me)
+  if (!isMe || !userDetails) return null;
+
+  return (
+    <div>
+      <div className="user-karma__section-header">
+        <h2>{t("karma")}</h2>
+      </div>
+
+      <div className="user-karma__box">
+        <div className="user-karma__content">
+          <div className="user-karma__stats-row">
+            <p className="user-karma__description">
+              <Award size={20} /> {numberFormatter.format(userDetails.karma)} {t("karma_count")}
+            </p>
+          </div>
+          <div className="user-karma__info">
+            <small className="user-karma__info-text">
+              {t("karma_description")}
+            </small>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/types/index.ts

@@ -182,6 +182,7 @@ export interface UserDetails {
   bio: string;
   featurebaseJwt: string;
   subscription: Subscription | null;
+  karma: number;
   quirks?: {
     backupsPerGameLimit: number;
   };