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

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;

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")}

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: 0.8rem;
-    font-size: globals.$body-font-size;
+    font-weight: 600;
   }
 
   &__game-info {
+    font-size: 0.75rem;
     display: flex;
     gap: globals.$spacing-unit;
     align-items: center;

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">
+        {showViewAllButton && (
-          <button
+          <div className="friends-box__view-all-container">
-            type="button"
+            <button
-            className="friends-box__view-all"
+              type="button"
-            onClick={() => setShowAllFriendsModal(true)}
+              className="friends-box__view-all"
-          >
+              onClick={() => setShowAllFriendsModal(true)}
-            {t("view_all")}
+            >
-          </button>
+              {t("view_all")}
-        </div>
+            </button>
+          </div>
+        )}
       </div>
 
       {userProfile && (

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 />

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;

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

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

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

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

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

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>
               ) : (