feat: organize code

src/renderer/src/app.tsx

@@ -25,7 +25,7 @@ import {
   setGameRunning,
 } from "@renderer/features";
 import { useTranslation } from "react-i18next";
-import { UserFriendRequestModal } from "./pages/shared-modals/user-friend-request-modal";
+import { UserFriendModal } from "./pages/shared-modals/user-friend-modal";
 
 export interface AppProps {
   children: React.ReactNode;
@@ -40,7 +40,6 @@ export function App() {
   const { clearDownload, setLastPacket } = useDownload();
 
   const {
-    userDetails,
     showFriendRequestsModal,
     setShowFriendRequestModal,
     updateFriendRequests,
@@ -218,7 +217,7 @@ export function App() {
         onClose={handleToastClose}
       />
 
-      <UserFriendRequestModal
+      <UserFriendModal
         visible={showFriendRequestsModal}
         onClose={() => setShowFriendRequestModal(false)}
       />

src/renderer/src/pages/shared-modals/user-friend-modal.css.ts

@@ -0,0 +1,92 @@
+import { SPACING_UNIT, vars } from "../../theme.css";
+import { style } from "@vanilla-extract/css";
+
+export const profileContentBox = style({
+  display: "flex",
+  gap: `${SPACING_UNIT * 3}px`,
+  alignItems: "center",
+  borderRadius: "4px",
+  border: `solid 1px ${vars.color.border}`,
+  width: "100%",
+  boxShadow: "0px 0px 15px 0px rgba(0, 0, 0, 0.7)",
+  transition: "all ease 0.3s",
+});
+
+export const friendAvatarContainer = style({
+  width: "35px",
+  minWidth: "35px",
+  height: "35px",
+  borderRadius: "50%",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: vars.color.background,
+  overflow: "hidden",
+  border: `solid 1px ${vars.color.border}`,
+  boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)",
+});
+
+export const friendListDisplayName = style({
+  fontWeight: "bold",
+  fontSize: vars.size.body,
+  textAlign: "left",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+export const profileAvatar = style({
+  height: "100%",
+  width: "100%",
+  objectFit: "cover",
+});
+
+export const friendListContainer = style({
+  width: "100%",
+  height: "54px",
+  transition: "all ease 0.2s",
+  position: "relative",
+  ":hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+  },
+});
+
+export const friendListButton = style({
+  display: "flex",
+  alignItems: "center",
+  position: "absolute",
+  cursor: "pointer",
+  height: "100%",
+  width: "100%",
+  flexDirection: "row",
+  color: vars.color.body,
+  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
+  padding: "0 8px",
+});
+
+export const friendRequestItem = style({
+  color: vars.color.body,
+  ":hover": {
+    backgroundColor: "rgba(255, 255, 255, 0.15)",
+  },
+});
+
+export const acceptRequestButton = style({
+  cursor: "pointer",
+  color: vars.color.body,
+  width: "28px",
+  height: "28px",
+  ":hover": {
+    color: vars.color.success,
+  },
+});
+
+export const cancelRequestButton = style({
+  cursor: "pointer",
+  color: vars.color.body,
+  width: "28px",
+  height: "28px",
+  ":hover": {
+    color: vars.color.danger,
+  },
+});

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

@@ -11,7 +11,7 @@ export interface UserAddFriendsModalProps {
   onClose: () => void;
 }
 
-export const UserFriendRequestModal = ({
+export const UserFriendModal = ({
   visible,
   onClose,
 }: UserAddFriendsModalProps) => {

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

@@ -3,7 +3,7 @@ import {
   PersonIcon,
   XCircleIcon,
 } from "@primer/octicons-react";
-import * as styles from "../user/user.css";
+import * as styles from "./user-friend-modal.css";
 import cn from "classnames";
 import { SPACING_UNIT } from "@renderer/theme.css";
 

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

@@ -13,13 +13,7 @@ import {
 } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
 import { buildGameDetailsPath, steamUrlBuilder } from "@renderer/helpers";
-import {
+import { PersonIcon, PlusIcon, TelescopeIcon } from "@primer/octicons-react";
-  PersonAddIcon,
-  PersonIcon,
-  PlusCircleIcon,
-  PlusIcon,
-  TelescopeIcon,
-} from "@primer/octicons-react";
 import { Button, Link } from "@renderer/components";
 import { UserEditProfileModal } from "./user-edit-modal";
 import { UserSignOutModal } from "./user-signout-modal";
@@ -386,12 +380,14 @@ export function UserContent({
                   );
                 })}
 
-                <Button
+                {isMe && (
-                  theme="outline"
+                  <Button
-                  onClick={() => setShowFriendRequestModal(true)}
+                    theme="outline"
-                >
+                    onClick={() => setShowFriendRequestModal(true)}
-                  <PlusIcon /> {t("add")}
+                  >
-                </Button>
+                    <PlusIcon /> {t("add")}
+                  </Button>
+                )}
               </div>
             </div>
           )}

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

@@ -199,19 +199,6 @@ export const friendListContainer = style({
   },
 });
 
-export const friendListButton = style({
-  display: "flex",
-  alignItems: "center",
-  position: "absolute",
-  cursor: "pointer",
-  height: "100%",
-  width: "100%",
-  flexDirection: "row",
-  color: vars.color.body,
-  gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
-  padding: "0 8px",
-});
-
 export const gameInformation = style({
   display: "flex",
   flexDirection: "column",
@@ -284,30 +271,3 @@ export const profileBackground = style({
   top: "0",
   borderRadius: "4px",
 });
-
-export const friendRequestItem = style({
-  color: vars.color.body,
-  ":hover": {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
-  },
-});
-
-export const acceptRequestButton = style({
-  cursor: "pointer",
-  color: vars.color.body,
-  width: "28px",
-  height: "28px",
-  ":hover": {
-    color: vars.color.success,
-  },
-});
-
-export const cancelRequestButton = style({
-  cursor: "pointer",
-  color: vars.color.body,
-  width: "28px",
-  height: "28px",
-  ":hover": {
-    color: vars.color.danger,
-  },
-});