feat: adjust ui

src/locales/en/translation.json

@@ -267,6 +267,7 @@
     "private": "Private",
     "friends_only": "Friends only",
     "privacy": "Privacy",
-    "blocked_users": "Blocked users"
+    "blocked_users": "Blocked users",
+    "unblock": "Unblock"
   }
 }

src/locales/pt/translation.json

@@ -267,6 +267,7 @@
     "private": "Privado",
     "friends_only": "Apenas amigos",
     "public": "Público",
-    "blocked_users": "Usuários bloqueados"
+    "blocked_users": "Usuários bloqueados",
+    "unblock": "Desbloquear"
   }
 }

src/renderer/src/app.tsx

@@ -108,7 +108,7 @@ export function App() {
         fetchFriendRequests();
       }
     });
-  }, [fetchUserDetails, updateUserDetails, dispatch]);
+  }, [fetchUserDetails, fetchFriendRequests, updateUserDetails, dispatch]);
 
   const onSignIn = useCallback(() => {
     fetchUserDetails().then((response) => {
@@ -118,7 +118,13 @@ export function App() {
         showSuccessToast(t("successfully_signed_in"));
       }
     });
-  }, [fetchUserDetails, t, showSuccessToast, updateUserDetails]);
+  }, [
+    fetchUserDetails,
+    fetchFriendRequests,
+    t,
+    showSuccessToast,
+    updateUserDetails,
+  ]);
 
   useEffect(() => {
     const unsubscribe = window.electron.onGamesRunning((gamesRunning) => {

src/renderer/src/hooks/use-user-details.ts

@@ -99,7 +99,7 @@ export function useUserDetails() {
       dispatch(setFriendsModalVisible({ initialTab, userId }));
       fetchFriendRequests();
     },
-    [dispatch]
+    [dispatch, fetchFriendRequests]
   );
 
   const hideFriendsModal = useCallback(() => {

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

@@ -12,21 +12,26 @@ export type UserFriendItemProps = {
   userId: string;
   profileImageUrl: string | null;
   displayName: string;
-  onClickItem: (userId: string) => void;
 } & (
-  | { type: "ACCEPTED"; onClickUndoFriendship: (userId: string) => void }
+  | {
+      type: "ACCEPTED";
+      onClickUndoFriendship: (userId: string) => void;
+      onClickItem: (userId: string) => void;
+    }
+  | { type: "BLOCKED"; onClickUnblock: (userId: string) => void }
   | {
       type: "SENT" | "RECEIVED";
       onClickCancelRequest: (userId: string) => void;
       onClickAcceptRequest: (userId: string) => void;
       onClickRefuseRequest: (userId: string) => void;
+      onClickItem: (userId: string) => void;
     }
-  | { type: null }
+  | { type: null; onClickItem: (userId: string) => void }
 );
 
 export const UserFriendItem = (props: UserFriendItemProps) => {
   const { t } = useTranslation("user_profile");
-  const { userId, profileImageUrl, displayName, type, onClickItem } = props;
+  const { userId, profileImageUrl, displayName, type } = props;
 
   const getRequestDescription = () => {
     if (type === "ACCEPTED" || type === null) return null;
@@ -86,15 +91,69 @@ export const UserFriendItem = (props: UserFriendItemProps) => {
       );
     }
 
+    if (type === "BLOCKED") {
+      return (
+        <button
+          className={styles.cancelRequestButton}
+          onClick={() => props.onClickUnblock(userId)}
+          title={t("unblock")}
+        >
+          <XCircleIcon size={28} />
+        </button>
+      );
+    }
+
     return null;
   };
 
+  if (type === "BLOCKED") {
+    return (
+      <div className={cn(styles.friendListContainer, styles.profileContentBox)}>
+        <div className={styles.friendListButton} style={{ cursor: "inherit" }}>
+          <div className={styles.friendAvatarContainer}>
+            {profileImageUrl ? (
+              <img
+                className={styles.profileAvatar}
+                alt={displayName}
+                src={profileImageUrl}
+              />
+            ) : (
+              <PersonIcon size={24} />
+            )}
+          </div>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "flex-start",
+              flex: "1",
+              minWidth: 0,
+            }}
+          >
+            <p className={styles.friendListDisplayName}>{displayName}</p>
+          </div>
+        </div>
+
+        <div
+          style={{
+            position: "absolute",
+            right: "8px",
+            display: "flex",
+            gap: `${SPACING_UNIT}px`,
+          }}
+        >
+          {getRequestActions()}
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className={cn(styles.friendListContainer, styles.profileContentBox)}>
       <button
         type="button"
         className={styles.friendListButton}
-        onClick={() => onClickItem(userId)}
+        onClick={() => props.onClickItem(userId)}
       >
         <div className={styles.friendAvatarContainer}>
           {profileImageUrl ? (

src/renderer/src/pages/user/user-profile-settings-modal/user-block-list.tsx

@@ -1,23 +1,15 @@
 import { SPACING_UNIT } from "@renderer/theme.css";
 import { UserFriend } from "@types";
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
 import { useToast, useUserDetails } from "@renderer/hooks";
 import { useTranslation } from "react-i18next";
 import { UserFriendItem } from "@renderer/pages/shared-modals/user-friend-modal/user-friend-item";
 
-export interface UserEditProfileBlockListProps {
-  closeModal: () => void;
-}
-
 const pageSize = 12;
 
-export const UserEditProfileBlockList = ({
-  closeModal,
-}: UserEditProfileBlockListProps) => {
+export const UserEditProfileBlockList = () => {
   const { t } = useTranslation("user_profile");
   const { showErrorToast } = useToast();
-  const navigate = useNavigate();
 
   const [page, setPage] = useState(0);
   const [maxPage, setMaxPage] = useState(0);
@@ -51,11 +43,6 @@ export const UserEditProfileBlockList = ({
     reloadList();
   }, []);
 
-  const handleClickBlocked = (userId: string) => {
-    closeModal();
-    navigate(`/user/${userId}`);
-  };
-
   const handleUnblock = (userId: string) => {
     unblockUser(userId)
       .then(() => {
@@ -80,9 +67,8 @@ export const UserEditProfileBlockList = ({
             userId={friend.id}
             displayName={friend.displayName}
             profileImageUrl={friend.profileImageUrl}
-            onClickItem={handleClickBlocked}
-            onClickUndoFriendship={handleUnblock}
-            type={"ACCEPTED"}
+            onClickUnblock={handleUnblock}
+            type={"BLOCKED"}
             key={friend.id}
           />
         );

src/renderer/src/pages/user/user-profile-settings-modal/user-profile-settings-modal.tsx

@@ -36,7 +36,7 @@ export const UserProfileSettingsModal = ({
     }
 
     if (currentTabIndex == 1) {
-      return <UserEditProfileBlockList closeModal={onClose} />;
+      return <UserEditProfileBlockList />;
     }
 
     return <></>;