Lightemerald/hydra
1
0
Fork 0
mirror of https://github.com/hydralauncher/hydra.git synced 2026-01-28 21:31:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Moyasee
2025-10-02 19:04:25 +03:00
parent 19cf24ef48
commit 449ea92268
12 changed files with 433 additions and 255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/locales/en/translation.json
View File

@@ -317,7 +317,11 @@
"caption": "Caption", "caption": "Caption",
"audio": "Audio", "audio": "Audio",
"filter_by_source": "Filter by source", "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": { "activation": {
"title": "Activate Hydra", "title": "Activate Hydra",
@@ -624,7 +628,10 @@
"error_adding_friend": "Could not send friend request. Please check friend code", "error_adding_friend": "Could not send friend request. Please check friend code",
"friend_code_length_error": "Friend code must have 8 characters", "friend_code_length_error": "Friend code must have 8 characters",
"game_removed_from_pinned": "Game removed from pinned", "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": {
"achievement_unlocked": "Achievement unlocked", "achievement_unlocked": "Achievement unlocked",

480
src/renderer/src/pages/game-details/game-details-content.tsx
View File

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

2
src/renderer/src/pages/game-details/game-details.scss
View File

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

19
src/renderer/src/pages/game-details/modals/delete-review-modal.scss Normal file
View File

@@ -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;
}
}

45
src/renderer/src/pages/game-details/modals/delete-review-modal.tsx Normal file
View File

@@ -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>
);
}

1
src/renderer/src/pages/game-details/modals/index.ts
View File

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

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

@@ -6,6 +6,7 @@
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
gap: calc(globals.$spacing-unit); gap: calc(globals.$spacing-unit);
margin-bottom: calc(globals.$spacing-unit * 3);
} }
&__label { &__label {
@@ -37,7 +38,7 @@
transition: all ease 0.2s; transition: all ease 0.2s;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 6px; gap: 4px;
&:hover:not(:disabled) { &:hover:not(:disabled) {
color: rgba(255, 255, 255, 0.6); 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 { &__separator {
color: rgba(255, 255, 255, 0.3); color: rgba(255, 255, 255, 0.3);
font-size: 14px; font-size: 14px;

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

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

2
src/renderer/src/pages/profile/profile-content/profile-content.tsx
View File

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

47
src/renderer/src/pages/profile/profile-content/user-karma-box.scss Normal file
View File

@@ -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;
}
}

40
src/renderer/src/pages/profile/profile-content/user-karma-box.tsx Normal file
View File

@@ -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>
);
}

1
src/types/index.ts
View File

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