feat: profile redesign

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hydralauncher",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "Hydra",
   "main": "./out/main/index.js",
   "author": "Los Broxas",

src/main/events/catalogue/get-catalogue.ts

@@ -15,7 +15,8 @@ const getCatalogue = async (
   });
 
   const response = await HydraApi.get<{ objectId: string; shop: GameShop }[]>(
-    `/games/${category}?${params.toString()}`
+    `/games/${category}?${params.toString()}`,
+    { needsAuth: false }
   );
 
   return Promise.all(

src/main/events/profile/get-me.ts

@@ -1,15 +1,33 @@
 import { registerEvent } from "../register-event";
 import * as Sentry from "@sentry/electron/main";
-import { HydraApi } from "@main/services";
+import { HydraApi, logger } from "@main/services";
 import { UserProfile } from "@types";
 import { userAuthRepository } from "@main/repository";
-import { UserNotLoggedInError } from "@shared";
+import { steamUrlBuilder, UserNotLoggedInError } from "@shared";
+import { steamGamesWorker } from "@main/workers";
+
+const getSteamGame = async (objectId: string) => {
+  try {
+    const steamGame = await steamGamesWorker.run(Number(objectId), {
+      name: "getById",
+    });
+
+    return {
+      title: steamGame.name,
+      iconUrl: steamUrlBuilder.icon(objectId, steamGame.clientIcon),
+    };
+  } catch (err) {
+    logger.error("Failed to get Steam game", err);
+
+    return null;
+  }
+};
 
 const getMe = async (
   _event: Electron.IpcMainInvokeEvent
 ): Promise<UserProfile | null> => {
   return HydraApi.get(`/profile/me`)
-    .then((me) => {
+    .then(async (me) => {
       userAuthRepository.upsert(
         {
           id: 1,
@@ -20,6 +38,17 @@ const getMe = async (
         ["id"]
       );
 
+      if (me.currentGame) {
+        const steamGame = await getSteamGame(me.currentGame.objectId);
+
+        if (steamGame) {
+          me.currentGame = {
+            ...me.currentGame,
+            ...steamGame,
+          };
+        }
+      }
+
       Sentry.setUser({ id: me.id, username: me.username });
 
       return me;

src/main/events/user/get-user.ts

@@ -81,7 +81,6 @@ const getUser = async (
       totalFriends: friends.totalFriends,
     };
   } catch (err) {
-    console.log("err", err);
     return null;
   }
 };

src/main/services/library-sync/create-game.ts

@@ -1,15 +1,14 @@
 import { Game } from "@main/entity";
 import { HydraApi } from "../hydra-api";
 import { gameRepository } from "@main/repository";
+import { logger } from "../logger";
 
 export const createGame = async (game: Game) => {
-  console.log({ objectId: game.objectID, shop: game.shop });
-
   HydraApi.post("/games/download", {
     objectId: game.objectID,
     shop: game.shop,
   }).catch((err) => {
-    console.log(err);
+    logger.error("Failed to create game download", err);
   });
 
   HydraApi.post(`/profile/games`, {

src/renderer/src/components/confirmation-modal/confirmation-modal.css.ts

@@ -1,4 +1,4 @@
-import { SPACING_UNIT, vars } from "../../theme.css";
+import { SPACING_UNIT } from "../../theme.css";
 import { style } from "@vanilla-extract/css";
 
 export const actions = style({

src/renderer/src/components/game-card/game-card.tsx

@@ -1,8 +1,4 @@
-import {
-  DownloadIcon,
-  FileDirectoryIcon,
-  PeopleIcon,
-} from "@primer/octicons-react";
+import { DownloadIcon, PeopleIcon } from "@primer/octicons-react";
 import type { CatalogueEntry, GameStats } from "@types";
 
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";

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

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 import { PeopleIcon, PersonIcon } from "@primer/octicons-react";
 import * as styles from "./sidebar-profile.css";
-import { useAppSelector, useUserDetails } from "@renderer/hooks";
+import { useUserDetails } from "@renderer/hooks";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
@@ -17,8 +17,6 @@ export function SidebarProfile() {
     return friendRequests.filter((request) => request.type === "RECEIVED");
   }, [friendRequests]);
 
-  const { gameRunning } = useAppSelector((state) => state.gameRunning);
-
   const handleProfileClick = () => {
     if (userDetails === null) {
       window.electron.openAuthWindow();
@@ -76,19 +74,19 @@ export function SidebarProfile() {
               {userDetails ? userDetails.displayName : t("sign_in")}
             </p>
 
-            {userDetails && gameRunning && (
+            {userDetails && userDetails.currentGame && (
               <div>
-                <small>{gameRunning.title}</small>
+                <small>{userDetails.currentGame.title}</small>
               </div>
             )}
           </div>
 
-          {userDetails && gameRunning?.iconUrl && (
+          {userDetails && userDetails.currentGame && (
             <img
-              alt={gameRunning.title}
+              alt={userDetails.currentGame.title}
               width={24}
               style={{ borderRadius: 4 }}
-              src={gameRunning.iconUrl}
+              src={userDetails.currentGame.iconUrl!}
             />
           )}
         </div>

src/renderer/src/components/sidebar/sidebar.tsx

@@ -15,7 +15,6 @@ import { buildGameDetailsPath } from "@renderer/helpers";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { SidebarProfile } from "./sidebar-profile";
 import { sortBy } from "lodash-es";
-import { ChevronDownIcon } from "@primer/octicons-react";
 
 const SIDEBAR_MIN_WIDTH = 200;
 const SIDEBAR_INITIAL_WIDTH = 250;

src/renderer/src/context/game-details/game-details.context.tsx

@@ -5,7 +5,13 @@ import { setHeaderTitle } from "@renderer/features";
 import { getSteamLanguage } from "@renderer/helpers";
 import { useAppDispatch, useAppSelector, useDownload } from "@renderer/hooks";
 
-import type { Game, GameRepack, GameShop, ShopDetails } from "@types";
+import type {
+  Game,
+  GameRepack,
+  GameShop,
+  GameStats,
+  ShopDetails,
+} from "@types";
 
 import { useTranslation } from "react-i18next";
 import { GameDetailsContext } from "./game-details.context.types";
@@ -22,6 +28,7 @@ export const gameDetailsContext = createContext<GameDetailsContext>({
   gameColor: "",
   showRepacksModal: false,
   showGameOptionsModal: false,
+  stats: null,
   setGameColor: () => {},
   selectGameExecutable: async () => null,
   updateGame: async () => {},
@@ -45,6 +52,8 @@ export function GameDetailsContextProvider({
   const [repacks, setRepacks] = useState<GameRepack[]>([]);
   const [game, setGame] = useState<Game | null>(null);
 
+  const [stats, setStats] = useState<GameStats | null>(null);
+
   const [isLoading, setIsLoading] = useState(false);
   const [gameColor, setGameColor] = useState("");
   const [isGameRunning, setisGameRunning] = useState(false);
@@ -85,13 +94,16 @@ export function GameDetailsContextProvider({
         getSteamLanguage(i18n.language)
       ),
       window.electron.searchGameRepacks(gameTitle),
+      window.electron.getGameStats(objectID!, shop as GameShop),
     ])
-      .then(([appDetailsResult, repacksResult]) => {
+      .then(([appDetailsResult, repacksResult, statsResult]) => {
         if (appDetailsResult.status === "fulfilled")
           setGameDetails(appDetailsResult.value);
 
         if (repacksResult.status === "fulfilled")
           setRepacks(repacksResult.value);
+
+        if (statsResult.status === "fulfilled") setStats(statsResult.value);
       })
       .finally(() => {
         setIsLoading(false);
@@ -167,6 +179,7 @@ export function GameDetailsContextProvider({
         gameColor,
         showGameOptionsModal,
         showRepacksModal,
+        stats,
         setGameColor,
         selectGameExecutable,
         updateGame,

src/renderer/src/context/game-details/game-details.context.types.ts

@@ -1,4 +1,10 @@
-import type { Game, GameRepack, GameShop, ShopDetails } from "@types";
+import type {
+  Game,
+  GameRepack,
+  GameShop,
+  GameStats,
+  ShopDetails,
+} from "@types";
 
 export interface GameDetailsContext {
   game: Game | null;
@@ -12,6 +18,7 @@ export interface GameDetailsContext {
   gameColor: string;
   showRepacksModal: boolean;
   showGameOptionsModal: boolean;
+  stats: GameStats | null;
   setGameColor: React.Dispatch<React.SetStateAction<string>>;
   selectGameExecutable: () => Promise<string | null>;
   updateGame: () => Promise<void>;

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

@@ -1,9 +1,9 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
-import type { FriendRequest, UserDetails } from "@types";
+import type { FriendRequest, UserProfile } from "@types";
 
 export interface UserDetailsState {
-  userDetails: UserDetails | null;
+  userDetails: UserProfile | null;
   profileBackground: null | string;
   friendRequests: FriendRequest[];
   isFriendsModalVisible: boolean;
@@ -24,7 +24,7 @@ export const userDetailsSlice = createSlice({
   name: "user-details",
   initialState,
   reducers: {
-    setUserDetails: (state, action: PayloadAction<UserDetails | null>) => {
+    setUserDetails: (state, action: PayloadAction<UserProfile | null>) => {
       state.userDetails = action.payload;
     },
     setProfileBackground: (state, action: PayloadAction<string | null>) => {

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

@@ -7,14 +7,12 @@ import {
   setFriendsModalVisible,
   setFriendsModalHidden,
 } from "@renderer/features";
-// import { profileBackgroundFromProfileImage } from "@renderer/helpers";
 import type {
   FriendRequestAction,
   UpdateProfileRequest,
-  UserDetails,
+  UserProfile,
 } from "@types";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
-import { logger } from "@renderer/logger";
 
 export function useUserDetails() {
   const dispatch = useAppDispatch();
@@ -42,17 +40,18 @@ export function useUserDetails() {
   }, [clearUserDetails]);
 
   const updateUserDetails = useCallback(
-    async (userDetails: UserDetails) => {
+    async (userDetails: UserProfile) => {
       dispatch(setUserDetails(userDetails));
 
       if (userDetails.profileImageUrl) {
+        // TODO: Decide if we want to use this
         // const profileBackground = await profileBackgroundFromProfileImage(
         //   userDetails.profileImageUrl
         // ).catch((err) => {
         //   logger.error("profileBackgroundFromProfileImage", err);
         //   return `#151515B3`;
         // });
-        dispatch(setProfileBackground(profileBackground));
+        // dispatch(setProfileBackground(profileBackground));
 
         window.localStorage.setItem(
           "userDetails",
@@ -68,7 +67,7 @@ export function useUserDetails() {
         );
       }
     },
-    [dispatch]
+    [dispatch, profileBackground]
   );
 
   const fetchUserDetails = useCallback(async () => {
@@ -83,7 +82,6 @@ export function useUserDetails() {
 
   const patchUser = useCallback(
     async (values: UpdateProfileRequest) => {
-      console.log("values", values);
       const response = await window.electron.updateProfile(values);
       return updateUserDetails(response);
     },

src/renderer/src/pages/game-details/sidebar/sidebar.tsx

@@ -16,7 +16,8 @@ export function Sidebar() {
   const [activeRequirement, setActiveRequirement] =
     useState<keyof SteamAppDetails["pc_requirements"]>("minimum");
 
-  const { gameTitle, shopDetails, objectID } = useContext(gameDetailsContext);
+  const { gameTitle, shopDetails, objectID, stats } =
+    useContext(gameDetailsContext);
 
   const { t } = useTranslation("game_details");
 
@@ -42,6 +43,15 @@ export function Sidebar() {
         isLoading={howLongToBeat.isLoading}
       />
 
+      <div className={styles.contentSidebarTitle} style={{ border: "none" }}>
+        <h3>{t("stats")}</h3>
+      </div>
+
+      <div>
+        <p>downloadCount {stats?.downloadCount}</p>
+        <p>playerCount {stats?.playerCount}</p>
+      </div>
+
       <div className={styles.contentSidebarTitle} style={{ border: "none" }}>
         <h3>{t("requirements")}</h3>
       </div>

src/renderer/src/pages/profile/profile-content/locked-profile.css.ts

@@ -0,0 +1,24 @@
+import { SPACING_UNIT } from "../../../theme.css";
+
+import { style } from "@vanilla-extract/css";
+
+export const container = style({
+  display: "flex",
+  width: "100%",
+  height: "100%",
+  justifyContent: "center",
+  alignItems: "center",
+  flexDirection: "column",
+  gap: `${SPACING_UNIT}px`,
+});
+
+export const lockIcon = style({
+  width: "60px",
+  height: "60px",
+  borderRadius: "50%",
+  backgroundColor: "rgba(255, 255, 255, 0.06)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginBottom: `${SPACING_UNIT * 2}px`,
+});

src/renderer/src/pages/profile/profile-content/locked-profile.tsx

@@ -0,0 +1,18 @@
+import { LockIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+
+import * as styles from "./locked-profile.css";
+
+export function LockedProfile() {
+  const { t } = useTranslation("user_profile");
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.lockIcon}>
+        <LockIcon size={24} />
+      </div>
+      <h2>{t("locked_profile")}</h2>
+      <p>{t("locked_profile_description")}</p>
+    </div>
+  );
+}

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

@@ -4,7 +4,7 @@ import { ProfileHero } from "../profile-hero/profile-hero";
 import { useAppDispatch } from "@renderer/hooks";
 import { setHeaderTitle } from "@renderer/features";
 import { steamUrlBuilder } from "@shared";
-import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import { SPACING_UNIT } from "@renderer/theme.css";
 
 import * as styles from "./profile-content.css";
 import { ClockIcon } from "@primer/octicons-react";
@@ -14,6 +14,7 @@ import { UserGame } from "@types";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { useNavigate } from "react-router-dom";
+import { LockedProfile } from "./locked-profile";
 
 export function ProfileContent() {
   const { userProfile } = useContext(userProfileContext);
@@ -64,12 +65,14 @@ export function ProfileContent() {
       objectID: game.objectId,
     });
 
+  const content = useMemo(() => {
     if (!userProfile) return null;
 
-  return (
-    <div>
-      <ProfileHero />
+    if (userProfile?.profileVisibility === "FRIENDS") {
+      return <LockedProfile />;
+    }
 
+    return (
       <section
         style={{
           display: "flex",
@@ -133,7 +136,7 @@ export function ProfileContent() {
                       className={styles.listItem}
                     >
                       <img
-                        src={game.iconUrl}
+                        src={game.iconUrl!}
                         alt={game.title}
                         style={{
                           width: "30px",
@@ -184,7 +187,7 @@ export function ProfileContent() {
                       className={styles.listItem}
                     >
                       <img
-                        src={friend.profileImageUrl}
+                        src={friend.profileImageUrl!}
                         alt={friend.displayName}
                         style={{
                           width: "30px",
@@ -203,6 +206,21 @@ export function ProfileContent() {
           </div>
         </div>
       </section>
+    );
+  }, [
+    userProfile,
+    formatPlayTime,
+    numberFormatter,
+    t,
+    truncatedGamesList,
+    navigate,
+  ]);
+
+  return (
+    <div>
+      <ProfileHero />
+
+      {content}
     </div>
   );
 }

src/renderer/src/pages/profile/profile-hero/profile-hero.tsx

@@ -1,7 +1,7 @@
 import { SPACING_UNIT } from "@renderer/theme.css";
 
 import * as styles from "./profile-hero.css";
-import { useContext, useMemo, useState } from "react";
+import { useCallback, useContext, useMemo, useState } from "react";
 import { userProfileContext } from "@renderer/context";
 import {
   CheckCircleFillIcon,
@@ -48,14 +48,15 @@ export function ProfileHero() {
 
   const navigate = useNavigate();
 
-  const handleSignOut = async () => {
+  const handleSignOut = useCallback(async () => {
     await signOut();
 
     showSuccessToast(t("successfully_signed_out"));
     navigate("/");
-  };
+  }, [navigate, signOut, showSuccessToast, t]);
 
-  const handleFriendAction = (userId: string, action: FriendAction) => {
+  const handleFriendAction = useCallback(
+    (userId: string, action: FriendAction) => {
       try {
         if (action === "UNDO_FRIENDSHIP") {
           undoFriendship(userId).then(getUserProfile);
@@ -80,7 +81,20 @@ export function ProfileHero() {
       } catch (err) {
         showErrorToast(t("try_again"));
       }
-  };
+    },
+    [
+      undoFriendship,
+      blockUser,
+      sendFriendRequest,
+      updateFriendRequestState,
+      t,
+      showErrorToast,
+      getUserProfile,
+      navigate,
+      showSuccessToast,
+      userProfile.id,
+    ]
+  );
 
   const profileActions = useMemo(() => {
     if (isMe) {
@@ -139,7 +153,7 @@ export function ProfileHero() {
             handleFriendAction(userProfile.relation!.BId, "CANCEL")
           }
         >
-          <XCircleFillIcon size={28} /> {t("cancel_request")}
+          <XCircleFillIcon /> {t("cancel_request")}
         </Button>
       );
     }
@@ -152,7 +166,7 @@ export function ProfileHero() {
             handleFriendAction(userProfile.relation!.AId, "ACCEPTED")
           }
         >
-          <CheckCircleFillIcon size={28} /> {t("accept_request")}
+          <CheckCircleFillIcon /> {t("accept_request")}
         </Button>
         <Button
           theme="outline"
@@ -160,11 +174,17 @@ export function ProfileHero() {
             handleFriendAction(userProfile.relation!.AId, "REFUSED")
           }
         >
-          <XCircleFillIcon size={28} /> {t("ignore_request")}
+          <XCircleFillIcon /> {t("ignore_request")}
         </Button>
       </>
     );
-  }, []);
+  }, [handleFriendAction, handleSignOut, isMe, t, userProfile]);
+
+  const handleAvatarClick = useCallback(() => {
+    if (isMe) {
+      setShowEditProfileModal(true);
+    }
+  }, [isMe]);
 
   return (
     <>
@@ -188,7 +208,11 @@ export function ProfileHero() {
         style={{ background: heroBackground }}
       >
         <div className={styles.userInformation}>
-          <button type="button" className={styles.profileAvatarButton}>
+          <button
+            type="button"
+            className={styles.profileAvatarButton}
+            onClick={handleAvatarClick}
+          >
             {userProfile.profileImageUrl ? (
               <img
                 className={styles.profileAvatar}

src/renderer/src/pages/profile/profile-skeleton.tsx

@@ -1,6 +1,5 @@
 import Skeleton from "react-loading-skeleton";
-import cn from "classnames";
-import * as styles from "./profile.css";
+
 import { SPACING_UNIT } from "@renderer/theme.css";
 import { useTranslation } from "react-i18next";
 
@@ -9,9 +8,9 @@ export function ProfileSkeleton() {
 
   return (
     <>
-      <Skeleton className={styles.profileHeaderSkeleton} />
-      <div className={styles.profileContent}>
-        <div className={styles.profileGameSection}>
+      <Skeleton />
+      <div>
+        <div>
           <h2>{t("activity")}</h2>
           {Array.from({ length: 3 }).map((_, index) => (
             <Skeleton
@@ -22,7 +21,7 @@ export function ProfileSkeleton() {
           ))}
         </div>
 
-        <div className={cn(styles.contentSidebar, styles.profileGameSection)}>
+        <div>
           <h2>{t("library")}</h2>
           <div
             style={{

src/renderer/src/pages/profile/profile.css.ts

@@ -1,5 +1,5 @@
-import { SPACING_UNIT } from "../../theme.css";
-import { style } from "@vanilla-extract/css";
+import { SPACING_UNIT, vars } from "../../theme.css";
+import { globalStyle, style } from "@vanilla-extract/css";
 
 export const wrapper = style({
   width: "100%",
@@ -7,3 +7,47 @@ export const wrapper = style({
   flexDirection: "column",
   gap: `${SPACING_UNIT * 3}px`,
 });
+
+/* Legacy styles */
+export const profileAvatarEditContainer = style({
+  alignSelf: "center",
+  width: "128px",
+  height: "128px",
+  display: "flex",
+  borderRadius: "4px",
+  color: vars.color.body,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: vars.color.background,
+  position: "relative",
+  border: `solid 1px ${vars.color.border}`,
+  boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)",
+  cursor: "pointer",
+});
+
+export const profileAvatar = style({
+  height: "100%",
+  width: "100%",
+  objectFit: "cover",
+  borderRadius: "4px",
+  overflow: "hidden",
+});
+
+export const profileAvatarEditOverlay = style({
+  position: "absolute",
+  width: "100%",
+  height: "100%",
+  backgroundColor: "rgba(0, 0, 0, 0.7)",
+  color: vars.color.muted,
+  zIndex: "1",
+  cursor: "pointer",
+  display: "flex",
+  justifyContent: "center",
+  transition: "all ease 0.2s",
+  alignItems: "center",
+  opacity: "0",
+});
+
+globalStyle(`${profileAvatarEditContainer}:hover ${profileAvatarEditOverlay}`, {
+  opacity: "1",
+});

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

@@ -116,8 +116,9 @@ export const UserEditProfile = ({
         ) : (
           <PersonIcon size={96} />
         )}
-        <div className={styles.editProfileImageBadge}>
-          <DeviceCameraIcon size={16} />
+
+        <div className={styles.profileAvatarEditOverlay}>
+          <DeviceCameraIcon size={38} />
         </div>
       </button>
 

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

@@ -42,13 +42,13 @@ export const UserFriendModalAddFriend = ({
 
   const handleClickRequest = (userId: string) => {
     closeModal();
-    navigate(`/user/${userId}`);
+    navigate(`/profile/${userId}`);
   };
 
   const handleClickSeeProfile = () => {
     closeModal();
     if (friendCode.length === 8) {
-      navigate(`/user/${friendCode}`);
+      navigate(`/profile/${friendCode}`);
     }
   };
 

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

@@ -80,7 +80,7 @@ export const UserFriendModalList = ({
 
   const handleClickFriend = (userId: string) => {
     closeModal();
-    navigate(`/user/${userId}`);
+    navigate(`/profile/${userId}`);
   };
 
   const handleUndoFriendship = (userId: string) => {

src/types/index.ts

@@ -270,12 +270,6 @@ export interface RealDebridUser {
   expiration: string;
 }
 
-export interface UserDetails {
-  id: string;
-  displayName: string;
-  profileImageUrl: string | null;
-}
-
 export interface UserFriend {
   id: string;
   displayName: string;