feat: add friends button on user profile

src/locales/en/translation.json

@@ -250,6 +250,13 @@
     "friend_request_sent": "Friend request sent",
     "friends": "Friends",
     "friends_list": "Friends list",
-    "user_not_found": "User not found"
+    "user_not_found": "User not found",
+    "block_user": "Block user",
+    "add_friend": "Add friend",
+    "request_sent": "Request sent",
+    "request_received": "Request received",
+    "accept_request": "Accept request",
+    "ignore_request": "Ignore request",
+    "cancel_request": "Cancel request"
   }
 }

src/locales/pt/translation.json

@@ -250,6 +250,13 @@
     "add": "Adicionar",
     "sending": "Enviando",
     "friends_list": "Lista de amigos",
-    "user_not_found": "Usuário não encontrado"
+    "user_not_found": "Usuário não encontrado",
+    "block_user": "Bloquear",
+    "add_friend": "Adicionar amigo",
+    "request_sent": "Pedido enviado",
+    "request_received": "Pedido recebido",
+    "accept_request": "Aceitar pedido",
+    "ignore_request": "Ignorar pedido",
+    "cancel_request": "Cancelar pedido"
   }
 }

src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-request.tsx

@@ -6,6 +6,7 @@ import {
 import * as styles from "./user-friend-modal.css";
 import cn from "classnames";
 import { SPACING_UNIT } from "@renderer/theme.css";
+import { useTranslation } from "react-i18next";
 
 export interface UserFriendRequestProps {
   userId: string;
@@ -28,6 +29,8 @@ export const UserFriendRequest = ({
   onClickRefuseRequest,
   onClickRequest,
 }: UserFriendRequestProps) => {
+  const { t } = useTranslation("user_profile");
+
   return (
     <div className={cn(styles.friendListContainer, styles.profileContentBox)}>
       <button
@@ -56,7 +59,9 @@ export const UserFriendRequest = ({
           }}
         >
           <p className={styles.friendListDisplayName}>{displayName}</p>
-          <small>{isRequestSent ? "Pedido enviado" : "Pedido recebido"}</small>
+          <small>
+            {isRequestSent ? t("request_sent") : t("request_received")}
+          </small>
         </div>
       </button>
 
@@ -72,6 +77,7 @@ export const UserFriendRequest = ({
           <button
             className={styles.cancelRequestButton}
             onClick={() => onClickCancelRequest(userId)}
+            title={t("cancel_request")}
           >
             <XCircleIcon size={28} />
           </button>
@@ -80,12 +86,14 @@ export const UserFriendRequest = ({
             <button
               className={styles.acceptRequestButton}
               onClick={() => onClickAcceptRequest(userId)}
+              title={t("accept_request")}
             >
               <CheckCircleIcon size={28} />
             </button>
             <button
               className={styles.cancelRequestButton}
               onClick={() => onClickRefuseRequest(userId)}
+              title={t("ignore_request")}
             >
               <XCircleIcon size={28} />
             </button>

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

@@ -17,7 +17,13 @@ import {
   profileBackgroundFromProfileImage,
   steamUrlBuilder,
 } from "@renderer/helpers";
-import { PersonIcon, PlusIcon, TelescopeIcon } from "@primer/octicons-react";
+import {
+  CheckCircleIcon,
+  PersonIcon,
+  PlusIcon,
+  TelescopeIcon,
+  XCircleIcon,
+} from "@primer/octicons-react";
 import { Button, Link } from "@renderer/components";
 import { UserEditProfileModal } from "./user-edit-modal";
 import { UserSignOutModal } from "./user-signout-modal";
@@ -39,6 +45,7 @@ export function UserContent({
   const {
     userDetails,
     profileBackground,
+    friendRequests,
     signOut,
     updateFriendRequests,
     showFriendsModal,
@@ -116,6 +123,71 @@ export function UserContent({
     }
   }, [profileBackground, isMe]);
 
+  const getProfileActions = () => {
+    if (isMe) {
+      return (
+        <>
+          <Button theme="outline" onClick={handleEditProfile}>
+            {t("edit_profile")}
+          </Button>
+
+          <Button theme="danger" onClick={() => setShowSignOutModal(true)}>
+            {t("sign_out")}
+          </Button>
+        </>
+      );
+    }
+
+    const friendRequest = friendRequests.find(
+      (request) => request.id == userProfile.id
+    );
+
+    if (!friendRequest) {
+      return (
+        <>
+          <Button theme="outline" onClick={() => {}}>
+            {t("add_friend")}
+          </Button>
+
+          <Button theme="danger" onClick={() => {}}>
+            {t("block_user")}
+          </Button>
+        </>
+      );
+    }
+
+    if (friendRequest.type === "RECEIVED") {
+      return (
+        <>
+          <Button
+            theme="outline"
+            className={styles.acceptRequestButton}
+            onClick={() => {}}
+          >
+            <CheckCircleIcon size={28} /> {t("accept_request")}
+          </Button>
+          <Button
+            theme="outline"
+            className={styles.cancelRequestButton}
+            onClick={() => {}}
+          >
+            <XCircleIcon size={28} /> {t("ignore_request")}
+          </Button>
+        </>
+      );
+    }
+
+    return (
+      <Button
+        theme="outline"
+        className={styles.cancelRequestButton}
+        onClick={() => {}}
+      >
+        <XCircleIcon size={28} /> {t("cancel_request")}
+      </Button>
+    );
+  };
+
   return (
     <>
       <UserEditProfileModal
@@ -201,37 +273,24 @@ export function UserContent({
           )}
         </div>
 
-        {isMe && (
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            justifyContent: "end",
+            zIndex: 1,
+          }}
+        >
           <div
             style={{
-              flex: 1,
               display: "flex",
-              justifyContent: "end",
-              zIndex: 1,
+              flexDirection: "column",
+              gap: `${SPACING_UNIT}px`,
             }}
           >
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                gap: `${SPACING_UNIT}px`,
-              }}
-            >
-              <>
-                <Button theme="outline" onClick={handleEditProfile}>
-                  {t("edit_profile")}
-                </Button>
-
-                <Button
-                  theme="danger"
-                  onClick={() => setShowSignOutModal(true)}
-                >
-                  {t("sign_out")}
-                </Button>
-              </>
-            </div>
+            {getProfileActions()}
           </div>
-        )}
+        </div>
       </section>
 
       <div className={styles.profileContent}>

src/renderer/src/pages/user/user.css.ts

@@ -279,3 +279,16 @@ export const profileBackground = style({
   top: "0",
   borderRadius: "4px",
 });
+
+export const cancelRequestButton = style({
+  cursor: "pointer",
+  color: vars.color.body,
+  ":hover": {
+    color: vars.color.danger,
+  },
+});
+
+export const acceptRequestButton = style({
+  cursor: "pointer",
+  color: vars.color.success,
+});

src/types/index.ts

@@ -293,6 +293,7 @@ export interface UserProfile {
   id: string;
   displayName: string;
   profileImageUrl: string | null;
+  profileVisibility: "PUBLIC" | "PRIVATE" | "FRIEND";
   totalPlayTimeInSeconds: number;
   libraryGames: UserGame[];
   recentGames: UserGame[];