feat: enhance add friend modal with friend code display and copy functionality

2026-01-11 05:46:17 +00:00 · 2025-12-24 13:22:57 +02:00
parent dff8d02f3f
commit cea5afc7f7
12 changed files with 132 additions and 103 deletions
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
@@ -7,6 +7,47 @@
  width: 100%;
  min-width: 400px;

+  &__my-code {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1.5);
+    padding: calc(globals.$spacing-unit * 1.5);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__my-code-label {
+    font-size: 0.875rem;
+    color: globals.$muted-color;
+    font-weight: 500;
+  }
+
+  &__my-code-value {
+    font-size: 0.875rem;
+    color: globals.$body-color;
+    font-family: monospace;
+    font-weight: 600;
+    flex: 1;
+  }
+
+  &__copy-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 2);
+    border-radius: 4px;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      color: globals.$body-color;
+    }
+  }
+
  &__actions {
    display: flex;
    flex-direction: row;
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
@@ -3,6 +3,7 @@ import { useToast, useUserDetails } from "@renderer/hooks";
 import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { CopyIcon } from "@primer/octicons-react";
 import "./add-friend-modal.scss";

 interface AddFriendModalProps {
@@ -22,10 +23,18 @@ export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
    updateFriendRequestState,
    friendRequests,
    fetchFriendRequests,
+    userDetails,
  } = useUserDetails();

  const { showSuccessToast, showErrorToast } = useToast();

+  const copyMyFriendCode = () => {
+    if (userDetails?.id) {
+      navigator.clipboard.writeText(userDetails.id);
+      showSuccessToast(t("friend_code_copied"));
+    }
+  };
+
  useEffect(() => {
    if (visible) {
      setFriendCode("");
@@ -88,6 +97,25 @@ export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
  return (
    <Modal visible={visible} title={t("add_friends")} onClose={onClose}>
      <div className="add-friend-modal">
+        {userDetails?.id && (
+          <div className="add-friend-modal__my-code">
+            <span className="add-friend-modal__my-code-label">
+              {t("your_friend_code")}
+            </span>
+            <span className="add-friend-modal__my-code-value">
+              {userDetails.id}
+            </span>
+            <button
+              onClick={copyMyFriendCode}
+              type="button"
+              className="add-friend-modal__copy-icon-button"
+              title={t("copy_friend_code")}
+            >
+              <CopyIcon size={16} />
+            </button>
+          </div>
+        )}
+
        <div className="add-friend-modal__actions">
          <TextField
            label={t("friend_code")}
--- a/src/renderer/src/pages/profile/profile-content/friends-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.scss
@@ -60,11 +60,12 @@

  &__friend-name {
    color: globals.$muted-color;
-    font-weight: bold;
-    font-size: globals.$body-font-size;
+    font-size: 0.8rem;
+    font-weight: 600;
  }

  &__game-info {
+    font-size: 0.75rem;
    display: flex;
    gap: globals.$spacing-unit;
    align-items: center;
--- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
@@ -9,6 +9,8 @@ import { AllFriendsModal } from "./all-friends-modal";
 import { AddFriendModal } from "./add-friend-modal";
 import "./friends-box.scss";

+const MAX_VISIBLE_FRIENDS = 5;
+
 export function FriendsBox() {
  const { userProfile } = useContext(userProfileContext);
  const { userDetails } = useUserDetails();
@@ -35,11 +37,15 @@ export function FriendsBox() {

  if (!userProfile?.friends.length) return null;

+  const visibleFriends = userProfile.friends.slice(0, MAX_VISIBLE_FRIENDS);
+  const totalFriends = userProfile.friends.length;
+  const showViewAllButton = totalFriends > MAX_VISIBLE_FRIENDS;
+
  return (
    <>
      <div className="friends-box__box">
        <ul className="friends-box__list">
-          {userProfile?.friends.map((friend) => (
+          {visibleFriends.map((friend) => (
            <li
              key={friend.id}
              title={
@@ -73,15 +79,17 @@ export function FriendsBox() {
            </li>
          ))}
        </ul>
-        <div className="friends-box__view-all-container">
-          <button
-            type="button"
-            className="friends-box__view-all"
-            onClick={() => setShowAllFriendsModal(true)}
-          >
-            {t("view_all")}
-          </button>
-        </div>
+        {showViewAllButton && (
+          <div className="friends-box__view-all-container">
+            <button
+              type="button"
+              className="friends-box__view-all"
+              onClick={() => setShowAllFriendsModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          </div>
+        )}
      </div>

      {userProfile && (
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -18,7 +18,6 @@ import { BadgesBox } from "./badges-box";
 import { FriendsBox, FriendsBoxAddButton } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
-import { UserKarmaBox } from "./user-karma-box";
 import { ProfileSection } from "../profile-section/profile-section";
 import { DeleteReviewModal } from "@renderer/pages/game-details/modals/delete-review-modal";
 import { GAME_STATS_ANIMATION_DURATION_IN_MS } from "./profile-animations";
@@ -440,12 +439,6 @@ export function ProfileContent() {
                <BadgesBox />
              </ProfileSection>
            )}
-            {userProfile?.karma !== undefined &&
-              userProfile?.karma !== null && (
-                <ProfileSection title={t("karma")} defaultOpen={true}>
-                  <UserKarmaBox />
-                </ProfileSection>
-              )}
            {userProfile?.recentGames.length > 0 && (
              <ProfileSection title={t("activity")} defaultOpen={true}>
                <RecentGamesBox />
--- a/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
@@ -47,13 +47,15 @@
  }

  &__game-title {
-    font-weight: bold;
+    font-size: 0.8rem;
+    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__game-description {
+    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: globals.$spacing-unit;
--- a/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
@@ -1,37 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-karma {
-  &__box {
-    padding: 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;
-  }
-}
--- a/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
@@ -1,37 +0,0 @@
-import { useContext } from "react";
-import { userProfileContext } from "@renderer/context";
-import { useTranslation } from "react-i18next";
-import { useFormat, useUserDetails } from "@renderer/hooks";
-import { Award } from "lucide-react";
-import "./user-karma-box.scss";
-
-export function UserKarmaBox() {
-  const { isMe, userProfile } = useContext(userProfileContext);
-  const { userDetails } = useUserDetails();
-  const { t } = useTranslation("user_profile");
-  const { numberFormatter } = useFormat();
-
-  // Get karma from userDetails (for current user) or userProfile (for other users)
-  const karma = isMe ? userDetails?.karma : userProfile?.karma;
-
-  // Don't show if karma is not available
-  if (karma === undefined || karma === null) return null;
-
-  return (
-    <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(karma)}{" "}
-            {t("karma_count")}
-          </p>
-        </div>
-        <div className="user-karma__info">
-          <small className="user-karma__info-text">
-            {t("karma_description")}
-          </small>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
@@ -32,13 +32,15 @@
  }

  &__list-title {
-    font-weight: bold;
+    font-size: 0.8rem;
+    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__list-description {
+    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: globals.$spacing-unit;
@@ -62,4 +64,10 @@
      cursor: pointer;
    }
  }
+
+  &__karma-info-text {
+    color: globals.$muted-color;
+    font-size: 0.75rem;
+    line-height: 1.4;
+  }
 }
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
@@ -1,16 +1,18 @@
 import { useCallback, useContext } from "react";
 import { userProfileContext } from "@renderer/context";
 import { useTranslation } from "react-i18next";
-import { useFormat } from "@renderer/hooks";
+import { useFormat, useUserDetails } from "@renderer/hooks";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { ClockIcon, TrophyIcon } from "@primer/octicons-react";
+import { Award } from "lucide-react";
 import "./user-stats-box.scss";

 export function UserStatsBox() {
  const { showHydraCloudModal } = useSubscription();
-  const { userStats, isMe } = useContext(userProfileContext);
+  const { userStats, isMe, userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
  const { t } = useTranslation("user_profile");
  const { numberFormatter } = useFormat();

@@ -33,6 +35,9 @@ export function UserStatsBox() {

  if (!userStats) return null;

+  const karma = isMe ? userDetails?.karma : userProfile?.karma;
+  const hasKarma = karma !== undefined && karma !== null;
+
  return (
    <div className="user-stats__box">
      <ul className="user-stats__list">
@@ -108,6 +113,23 @@ export function UserStatsBox() {
            </p>
          </div>
        </li>
+
+        {hasKarma && karma !== undefined && karma !== null && (
+          <li className="user-stats__list-item user-stats__list-item--karma">
+            <h3 className="user-stats__list-title">{t("karma")}</h3>
+            <div className="user-stats__stats-row">
+              <p className="user-stats__list-description">
+                <Award size={20} /> {numberFormatter.format(karma)}{" "}
+                {t("karma_count")}
+              </p>
+            </div>
+            <div className="user-stats__karma-info">
+              <small className="user-stats__karma-info-text">
+                {t("karma_description")}
+              </small>
+            </div>
+          </li>
+        )}
      </ul>
    </div>
  );
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -30,7 +30,7 @@
  &__copy-button {
    display: flex;
    align-items: center;
-    justify-content: flex-start;
+    justify-content: flex-end;
    background: none;
    border: none;
    color: globals.$body-color;
@@ -51,7 +51,7 @@
  }

  &__friend-code {
-    font-size: globals.$small-font-size;
+    font-size: 0.875rem;
    font-family: monospace;
    white-space: nowrap;
  }
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -323,22 +323,22 @@ export function ProfileHero() {
                    onMouseLeave={() => setIsCopyButtonHovered(false)}
                    initial={{ width: 28 }}
                    animate={{
-                      width: isCopyButtonHovered ? 94 : 28,
+                      width: isCopyButtonHovered ? 105 : 28,
                    }}
                    transition={{ duration: 0.2, ease: "easeInOut" }}
                  >
-                    <CopyIcon size={16} />
                    <motion.span
                      className="profile-hero__friend-code"
-                      initial={{ opacity: 0, marginLeft: 0 }}
+                      initial={{ opacity: 0, marginRight: 0 }}
                      animate={{
                        opacity: isCopyButtonHovered ? 1 : 0,
-                        marginLeft: isCopyButtonHovered ? 8 : 0,
+                        marginRight: isCopyButtonHovered ? 8 : 0,
                      }}
                      transition={{ duration: 0.2, ease: "easeInOut" }}
                    >
                      {userProfile?.id}
                    </motion.span>
+                    <CopyIcon size={16} />
                  </motion.button>
                </div>
              ) : (