feat: open modal in correct tab

src/renderer/src/app.tsx

@@ -40,8 +40,9 @@ export function App() {
   const { clearDownload, setLastPacket } = useDownload();
 
   const {
-    showFriendRequestsModal,
+    showFriendsModal,
-    setShowFriendRequestModal,
+    friendRequetsModalTab,
+    setShowFriendsModal,
     updateFriendRequests,
   } = useUserDetails();
 
@@ -218,8 +219,9 @@ export function App() {
       />
 
       <UserFriendModal
-        visible={showFriendRequestsModal}
+        visible={showFriendsModal}
-        onClose={() => setShowFriendRequestModal(false)}
+        initialTab={friendRequetsModalTab}
+        onClose={() => setShowFriendsModal(false, null)}
       />
 
       <main>

src/renderer/src/components/sidebar/sidebar-profile.tsx

@@ -6,6 +6,7 @@ import { useAppSelector, useUserDetails } from "@renderer/hooks";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { profileContainerBackground } from "./sidebar-profile.css";
+import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 
 export function SidebarProfile() {
   const navigate = useNavigate();
@@ -16,7 +17,7 @@ export function SidebarProfile() {
     userDetails,
     profileBackground,
     friendRequests,
-    setShowFriendRequestModal,
+    setShowFriendsModal,
   } = useUserDetails();
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
@@ -87,7 +88,9 @@ export function SidebarProfile() {
           <button
             type="button"
             className={styles.friendRequestButton}
-            onClick={() => setShowFriendRequestModal(true)}
+            onClick={() =>
+              setShowFriendsModal(true, UserFriendModalTab.AddFriend)
+            }
           >
             <PersonAddIcon size={24} />
             {friendRequests.length}

src/renderer/src/features/user-details-slice.ts

@@ -1,18 +1,21 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import type { FriendRequest, UserDetails } from "@types";
 
 export interface UserDetailsState {
   userDetails: UserDetails | null;
   profileBackground: null | string;
   friendRequests: FriendRequest[] | null;
-  showFriendRequestsModal: boolean;
+  showFriendsModal: boolean;
+  friendRequetsModalTab: UserFriendModalTab | null;
 }
 
 const initialState: UserDetailsState = {
   userDetails: null,
   profileBackground: null,
   friendRequests: null,
-  showFriendRequestsModal: false,
+  showFriendsModal: false,
+  friendRequetsModalTab: null,
 };
 
 export const userDetailsSlice = createSlice({
@@ -31,8 +34,14 @@ export const userDetailsSlice = createSlice({
     ) => {
       state.friendRequests = action.payload;
     },
-    setShowFriendRequestsModal: (state, action: PayloadAction<boolean>) => {
+    setshowFriendsModal: (state, action: PayloadAction<boolean>) => {
-      state.showFriendRequestsModal = action.payload;
+      state.showFriendsModal = action.payload;
+    },
+    setFriendRequestsModal: (
+      state,
+      action: PayloadAction<UserFriendModalTab | null>
+    ) => {
+      state.friendRequetsModalTab = action.payload;
     },
   },
 });
@@ -41,5 +50,6 @@ export const {
   setUserDetails,
   setProfileBackground,
   setFriendRequests,
-  setShowFriendRequestsModal,
+  setshowFriendsModal,
+  setFriendRequestsModal,
 } = userDetailsSlice.actions;

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

@@ -6,10 +6,12 @@ import {
   setProfileBackground,
   setUserDetails,
   setFriendRequests,
-  setShowFriendRequestsModal,
+  setshowFriendsModal,
+  setFriendRequestsModal,
 } from "@renderer/features";
 import { darkenColor } from "@renderer/helpers";
 import { FriendRequestAction, UserDetails } from "@types";
+import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 
 export function useUserDetails() {
   const dispatch = useAppDispatch();
@@ -18,7 +20,8 @@ export function useUserDetails() {
     userDetails,
     profileBackground,
     friendRequests,
-    showFriendRequestsModal,
+    showFriendsModal,
+    friendRequetsModalTab,
   } = useAppSelector((state) => state.userDetails);
 
   const clearUserDetails = useCallback(async () => {
@@ -91,9 +94,11 @@ export function useUserDetails() {
     dispatch(setFriendRequests(friendRequests));
   }, [dispatch]);
 
-  const setShowFriendRequestModal = useCallback(
+  const setShowFriendsModal = useCallback(
-    (showModal: boolean) => {
+    (showModal: boolean, tab: UserFriendModalTab | null) => {
-      dispatch(setShowFriendRequestsModal(showModal));
+      dispatch(setFriendRequestsModal(tab));
+      dispatch(setshowFriendsModal(showModal));
+
       if (showModal) {
         updateFriendRequests();
       }
@@ -123,7 +128,8 @@ export function useUserDetails() {
     userDetails,
     profileBackground,
     friendRequests,
-    showFriendRequestsModal,
+    showFriendsModal,
+    friendRequetsModalTab,
     fetchUserDetails,
     signOut,
     clearUserDetails,
@@ -132,6 +138,6 @@ export function useUserDetails() {
     sendFriendRequest,
     updateFriendRequests,
     updateFriendRequestState,
-    setShowFriendRequestModal,
+    setShowFriendsModal,
   };
 }

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

@@ -1,26 +1,45 @@
 import { Button, Modal } from "@renderer/components";
 import { SPACING_UNIT } from "@renderer/theme.css";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { UserFriendModalAddFriend } from "./user-friend-modal-add-friend";
 
+export enum UserFriendModalTab {
+  FriendsList,
+  AddFriend,
+}
+
 export interface UserAddFriendsModalProps {
   visible: boolean;
   onClose: () => void;
+  initialTab: UserFriendModalTab | null;
 }
 
 export const UserFriendModal = ({
   visible,
   onClose,
+  initialTab,
 }: UserAddFriendsModalProps) => {
   const { t } = useTranslation("user_profile");
 
-  const tabs = [t("add_friends"), t("friends_list")];
+  const tabs = [t("friends_list"), t("add_friends")];
 
-  const [currentTabIndex, setCurrentTabIndex] = useState(0);
+  const [currentTab, setCurrentTab] = useState(
+    initialTab || UserFriendModalTab.FriendsList
+  );
+
+  useEffect(() => {
+    if (initialTab != null) {
+      setCurrentTab(initialTab);
+    }
+  }, [initialTab]);
 
   const renderTab = () => {
-    if (currentTabIndex == 0) {
+    if (currentTab == UserFriendModalTab.FriendsList) {
+      return <></>;
+    }
+
+    if (currentTab == UserFriendModalTab.AddFriend) {
       return <UserFriendModalAddFriend closeModal={onClose} />;
     }
 
@@ -42,15 +61,15 @@ export const UserFriendModal = ({
             return (
               <Button
                 key={tab}
-                theme={index === currentTabIndex ? "primary" : "outline"}
+                theme={index === currentTab ? "primary" : "outline"}
-                onClick={() => setCurrentTabIndex(index)}
+                onClick={() => setCurrentTab(index)}
               >
                 {tab}
               </Button>
             );
           })}
         </section>
-        <h2>{tabs[currentTabIndex]}</h2>
+        <h2>{tabs[currentTab]}</h2>
         {renderTab()}
       </div>
     </Modal>

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

@@ -17,6 +17,7 @@ import { PersonIcon, PlusIcon, TelescopeIcon } from "@primer/octicons-react";
 import { Button, Link } from "@renderer/components";
 import { UserEditProfileModal } from "./user-edit-modal";
 import { UserSignOutModal } from "./user-signout-modal";
+import { UserFriendModalTab } from "../shared-modals/user-friend-modal";
 
 const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 
@@ -36,7 +37,7 @@ export function UserContent({
     profileBackground,
     signOut,
     updateFriendRequests,
-    setShowFriendRequestModal,
+    setShowFriendsModal,
   } = useUserDetails();
   const { showSuccessToast } = useToast();
 
@@ -329,7 +330,12 @@ export function UserContent({
           {(isMe ||
             (userProfile.friends && userProfile.friends.length > 0)) && (
             <div className={styles.friendsSection}>
-              <div className={styles.friendsSectionHeader}>
+              <button
+                className={styles.friendsSectionHeader}
+                onClick={() =>
+                  setShowFriendsModal(true, UserFriendModalTab.FriendsList)
+                }
+              >
                 <h2>{t("friends")}</h2>
 
                 <div
@@ -342,7 +348,7 @@ export function UserContent({
                 <h3 style={{ fontWeight: "400" }}>
                   {userProfile.friends?.length || 0}
                 </h3>
-              </div>
+              </button>
 
               <div
                 style={{
@@ -383,7 +389,9 @@ export function UserContent({
                 {isMe && (
                   <Button
                     theme="outline"
-                    onClick={() => setShowFriendRequestModal(true)}
+                    onClick={() =>
+                      setShowFriendsModal(true, UserFriendModalTab.AddFriend)
+                    }
                   >
                     <PlusIcon /> {t("add")}
                   </Button>

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

@@ -120,6 +120,8 @@ export const friendsSection = style({
 });
 
 export const friendsSectionHeader = style({
+  fontSize: vars.size.body,
+  color: vars.color.body,
   cursor: "pointer",
   display: "flex",
   alignItems: "center",