Merge pull request #982 from hydralauncher/feature/adding-flame-animation

chore: bump version

package.json

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

src/locales/en/translation.json

@@ -9,7 +9,7 @@
     "surprise_me": "Surprise me",
     "no_results": "No results found",
     "start_typing": "Starting typing to search...",
-    "hot": "🔥 Hot now",
+    "hot": "Hot now",
     "weekly": "📅 Top games of the week"
   },
   "sidebar": {

src/locales/es/translation.json

@@ -8,7 +8,7 @@
     "trending": "Tendencias",
     "surprise_me": "¡Sorpréndeme!",
     "no_results": "No se encontraron resultados",
-    "hot": "🔥 Caliente ahora",
+    "hot": "Caliente ahora",
     "weekly": "📅 Los mejores juegos de la semana",
     "start_typing": "Empieza a escribir para buscar..."
   },

src/locales/pt-BR/translation.json

@@ -6,7 +6,7 @@
   "home": {
     "featured": "Destaques",
     "trending": "Populares",
-    "hot": "🔥 Populares agora",
+    "hot": "Populares agora",
     "weekly": "📅 Mais baixados da semana",
     "surprise_me": "Surpreenda-me",
     "no_results": "Nenhum resultado encontrado",

src/locales/ru/translation.json

@@ -8,7 +8,7 @@
     "trending": "В тренде",
     "surprise_me": "Удиви меня",
     "no_results": "Ничего не найдено",
-    "hot": "🔥 Сейчас жарко",
+    "hot": "Сейчас жарко",
     "start_typing": "Начинаю вводить текст для поиска...",
     "weekly": "📅 Лучшие игры недели"
   },

src/main/events/index.ts

@@ -59,6 +59,7 @@ import "./profile/update-friend-request";
 import "./profile/update-profile";
 import "./profile/process-profile-image";
 import "./profile/send-friend-request";
+import "./profile/sync-friend-requests";
 import { isPortableVersion } from "@main/helpers";
 
 ipcMain.handle("ping", () => "pong");

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

@@ -1,32 +1,14 @@
 import { registerEvent } from "../register-event";
 import * as Sentry from "@sentry/electron/main";
-import { HydraApi, logger } from "@main/services";
-import { UserProfile } from "@types";
+import { HydraApi } from "@main/services";
+import { ProfileVisibility, UserDetails } from "@types";
 import { userAuthRepository } from "@main/repository";
-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;
-  }
-};
+import { UserNotLoggedInError } from "@shared";
 
 const getMe = async (
   _event: Electron.IpcMainInvokeEvent
-): Promise<UserProfile | null> => {
-  return HydraApi.get(`/profile/me`)
+): Promise<UserDetails | null> => {
+  return HydraApi.get<UserDetails>(`/profile/me`)
     .then(async (me) => {
       userAuthRepository.upsert(
         {
@@ -38,17 +20,6 @@ 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;
@@ -61,7 +32,13 @@ const getMe = async (
       const loggedUser = await userAuthRepository.findOne({ where: { id: 1 } });
 
       if (loggedUser) {
-        return { ...loggedUser, id: loggedUser.userId };
+        return {
+          ...loggedUser,
+          id: loggedUser.userId,
+          username: "",
+          bio: "",
+          profileVisibility: "PUBLIC" as ProfileVisibility,
+        };
       }
 
       return null;

src/main/events/profile/sync-friend-requests.ts

@@ -0,0 +1,9 @@
+import { registerEvent } from "../register-event";
+import { HydraApi } from "@main/services";
+import { FriendRequestSync } from "@types";
+
+const syncFriendRequests = async (_event: Electron.IpcMainInvokeEvent) => {
+  return HydraApi.get<FriendRequestSync>(`/profile/friend-requests/sync`);
+};
+
+registerEvent("syncFriendRequests", syncFriendRequests);

src/main/events/torrenting/start-game-download.ts

@@ -2,7 +2,7 @@ import { registerEvent } from "../register-event";
 
 import type { StartGameDownloadPayload } from "@types";
 import { getFileBase64 } from "@main/helpers";
-import { DownloadManager } from "@main/services";
+import { DownloadManager, HydraApi, logger } from "@main/services";
 
 import { Not } from "typeorm";
 import { steamGamesWorker } from "@main/workers";
@@ -101,6 +101,17 @@ const startGameDownload = async (
 
     createGame(updatedGame!).catch(() => {});
 
+    HydraApi.post(
+      "/games/download",
+      {
+        objectId: updatedGame!.objectID,
+        shop: updatedGame!.shop,
+      },
+      { needsAuth: false }
+    ).catch((err) => {
+      logger.error("Failed to create game download", err);
+    });
+
     await DownloadManager.cancelDownload(updatedGame!.id);
     await DownloadManager.startDownload(updatedGame!);
 

src/main/services/hydra-api.ts

@@ -6,6 +6,7 @@ import { uploadGamesBatch } from "./library-sync";
 import { clearGamesRemoteIds } from "./library-sync/clear-games-remote-id";
 import { logger } from "./logger";
 import { UserNotLoggedInError } from "@shared";
+import { omit } from "lodash-es";
 
 interface HydraApiOptions {
   needsAuth: boolean;
@@ -96,11 +97,14 @@ export class HydraApi {
     this.instance.interceptors.response.use(
       (response) => {
         logger.log(" ---- RESPONSE -----");
+        const data = Array.isArray(response.data)
+          ? response.data
+          : omit(response.data, ["username", "accessToken", "refreshToken"]);
         logger.log(
           response.status,
           response.config.method,
           response.config.url,
-          response.data
+          data
         );
         return response;
       },
@@ -166,7 +170,10 @@ export class HydraApi {
         this.userAuth.authToken = accessToken;
         this.userAuth.expirationTimestamp = tokenExpirationTimestamp;
 
-        logger.log("Token refreshed", this.userAuth);
+        logger.log(
+          "Token refreshed. New expiration:",
+          this.userAuth.expirationTimestamp
+        );
 
         userAuthRepository.upsert(
           {

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

@@ -1,20 +1,8 @@
 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) => {
-  HydraApi.post(
-    "/games/download",
-    {
-      objectId: game.objectID,
-      shop: game.shop,
-    },
-    { needsAuth: false }
-  ).catch((err) => {
-    logger.error("Failed to create game download", err);
-  });
-
   return HydraApi.post(`/profile/games`, {
     objectId: game.objectID,
     playTimeInMilliseconds: Math.trunc(game.playTimeInMilliseconds),

src/main/services/process-watcher.ts

@@ -119,7 +119,7 @@ const onCloseGame = (game: Game) => {
   if (game.remoteId) {
     updateGamePlaytime(
       game,
-      performance.now() - gamePlaytime.firstTick,
+      performance.now() - gamePlaytime.lastSyncTick,
       game.lastTimePlayed!
     ).catch(() => {});
   } else {

src/preload/index.ts

@@ -150,6 +150,7 @@ contextBridge.exposeInMainWorld("electron", {
   processProfileImage: (imagePath: string) =>
     ipcRenderer.invoke("processProfileImage", imagePath),
   getFriendRequests: () => ipcRenderer.invoke("getFriendRequests"),
+  syncFriendRequests: () => ipcRenderer.invoke("syncFriendRequests"),
   updateFriendRequest: (userId: string, action: FriendRequestAction) =>
     ipcRenderer.invoke("updateFriendRequest", userId, action),
   sendFriendRequest: (userId: string) =>

src/renderer/src/app.tsx

@@ -43,7 +43,7 @@ export function App() {
     isFriendsModalVisible,
     friendRequetsModalTab,
     friendModalUserId,
-    fetchFriendRequests,
+    syncFriendRequests,
     hideFriendsModal,
   } = useUserDetails();
 
@@ -105,22 +105,22 @@ export function App() {
     fetchUserDetails().then((response) => {
       if (response) {
         updateUserDetails(response);
-        fetchFriendRequests();
+        syncFriendRequests();
       }
     });
-  }, [fetchUserDetails, fetchFriendRequests, updateUserDetails, dispatch]);
+  }, [fetchUserDetails, syncFriendRequests, updateUserDetails, dispatch]);
 
   const onSignIn = useCallback(() => {
     fetchUserDetails().then((response) => {
       if (response) {
         updateUserDetails(response);
-        fetchFriendRequests();
+        syncFriendRequests();
         showSuccessToast(t("successfully_signed_in"));
       }
     });
   }, [
     fetchUserDetails,
-    fetchFriendRequests,
+    syncFriendRequests,
     t,
     showSuccessToast,
     updateUserDetails,

src/renderer/src/components/sidebar/download-icon.tsx

@@ -1,4 +1,3 @@
-import { useRef } from "react";
 import Lottie from "lottie-react";
 
 import downloadingAnimation from "@renderer/assets/lottie/downloading.json";
@@ -8,11 +7,8 @@ export interface DownloadIconProps {
 }
 
 export function DownloadIcon({ isDownloading }: DownloadIconProps) {
-  const lottieRef = useRef(null);
-
   return (
     <Lottie
-      lottieRef={lottieRef}
       animationData={downloadingAnimation}
       loop={isDownloading}
       autoplay={isDownloading}

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

@@ -15,15 +15,15 @@ export function SidebarProfile() {
 
   const { t } = useTranslation("sidebar");
 
-  const { userDetails, friendRequests, showFriendsModal, fetchFriendRequests } =
-    useUserDetails();
+  const {
+    userDetails,
+    friendRequestCount,
+    showFriendsModal,
+    syncFriendRequests,
+  } = useUserDetails();
 
   const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
-  const receivedRequests = useMemo(() => {
-    return friendRequests.filter((request) => request.type === "RECEIVED");
-  }, [friendRequests]);
-
   const handleProfileClick = () => {
     if (userDetails === null) {
       window.electron.openAuthWindow();
@@ -35,7 +35,7 @@ export function SidebarProfile() {
 
   useEffect(() => {
     pollingInterval.current = setInterval(() => {
-      fetchFriendRequests();
+      syncFriendRequests();
     }, LONG_POLLING_INTERVAL);
 
     return () => {
@@ -43,7 +43,7 @@ export function SidebarProfile() {
         clearInterval(pollingInterval.current);
       }
     };
-  }, [fetchFriendRequests]);
+  }, [syncFriendRequests]);
 
   const friendsButton = useMemo(() => {
     if (!userDetails) return null;
@@ -57,16 +57,16 @@ export function SidebarProfile() {
         }
         title={t("friends")}
       >
-        {receivedRequests.length > 0 && (
+        {friendRequestCount > 0 && (
           <small className={styles.friendsButtonBadge}>
-            {receivedRequests.length > 99 ? "99+" : receivedRequests.length}
+            {friendRequestCount > 99 ? "99+" : friendRequestCount}
           </small>
         )}
 
         <PeopleIcon size={16} />
       </button>
     );
-  }, [userDetails, t, receivedRequests, showFriendsModal]);
+  }, [userDetails, t, friendRequestCount, showFriendsModal]);
 
   return (
     <div className={styles.profileContainer}>

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

@@ -105,7 +105,7 @@ export function GameDetailsContextProvider({
           setShopDetails(appDetailsResult.value);
 
           if (
-            appDetailsResult.value!.content_descriptors.ids.includes(
+            appDetailsResult.value?.content_descriptors.ids.includes(
               SteamContentDescriptor.AdultOnlySexualContent
             )
           ) {

src/renderer/src/declaration.d.ts

@@ -23,6 +23,8 @@ import type {
   GameStats,
   TrendingGame,
   UserStats,
+  UserDetails,
+  FriendRequestSync,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -153,7 +155,7 @@ declare global {
     ) => Promise<void>;
 
     /* Profile */
-    getMe: () => Promise<UserProfile | null>;
+    getMe: () => Promise<UserDetails | null>;
     undoFriendship: (userId: string) => Promise<void>;
     updateProfile: (
       updateProfile: UpdateProfileRequest
@@ -163,6 +165,7 @@ declare global {
       path: string
     ) => Promise<{ imagePath: string; mimeType: string }>;
     getFriendRequests: () => Promise<FriendRequest[]>;
+    syncFriendRequests: () => Promise<FriendRequestSync>;
     updateFriendRequest: (
       userId: string,
       action: FriendRequestAction

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

@@ -1,11 +1,12 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
-import type { FriendRequest, UserProfile } from "@types";
+import type { FriendRequest, UserDetails } from "@types";
 
 export interface UserDetailsState {
-  userDetails: UserProfile | null;
+  userDetails: UserDetails | null;
   profileBackground: null | string;
   friendRequests: FriendRequest[];
+  friendRequestCount: number;
   isFriendsModalVisible: boolean;
   friendRequetsModalTab: UserFriendModalTab | null;
   friendModalUserId: string;
@@ -15,6 +16,7 @@ const initialState: UserDetailsState = {
   userDetails: null,
   profileBackground: null,
   friendRequests: [],
+  friendRequestCount: 0,
   isFriendsModalVisible: false,
   friendRequetsModalTab: null,
   friendModalUserId: "",
@@ -24,7 +26,7 @@ export const userDetailsSlice = createSlice({
   name: "user-details",
   initialState,
   reducers: {
-    setUserDetails: (state, action: PayloadAction<UserProfile | null>) => {
+    setUserDetails: (state, action: PayloadAction<UserDetails | null>) => {
       state.userDetails = action.payload;
     },
     setProfileBackground: (state, action: PayloadAction<string | null>) => {
@@ -33,6 +35,9 @@ export const userDetailsSlice = createSlice({
     setFriendRequests: (state, action: PayloadAction<FriendRequest[]>) => {
       state.friendRequests = action.payload;
     },
+    setFriendRequestCount: (state, action: PayloadAction<number>) => {
+      state.friendRequestCount = action.payload;
+    },
     setFriendsModalVisible: (
       state,
       action: PayloadAction<{ initialTab: UserFriendModalTab; userId: string }>
@@ -52,6 +57,7 @@ export const {
   setUserDetails,
   setProfileBackground,
   setFriendRequests,
+  setFriendRequestCount,
   setFriendsModalVisible,
   setFriendsModalHidden,
 } = userDetailsSlice.actions;

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

@@ -6,11 +6,12 @@ import {
   setFriendRequests,
   setFriendsModalVisible,
   setFriendsModalHidden,
+  setFriendRequestCount,
 } from "@renderer/features";
 import type {
   FriendRequestAction,
   UpdateProfileRequest,
-  UserProfile,
+  UserDetails,
 } from "@types";
 import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 
@@ -21,6 +22,7 @@ export function useUserDetails() {
     userDetails,
     profileBackground,
     friendRequests,
+    friendRequestCount,
     isFriendsModalVisible,
     friendModalUserId,
     friendRequetsModalTab,
@@ -40,7 +42,7 @@ export function useUserDetails() {
   }, [clearUserDetails]);
 
   const updateUserDetails = useCallback(
-    async (userDetails: UserProfile) => {
+    async (userDetails: UserDetails) => {
       dispatch(setUserDetails(userDetails));
 
       if (userDetails.profileImageUrl) {
@@ -83,7 +85,10 @@ export function useUserDetails() {
   const patchUser = useCallback(
     async (values: UpdateProfileRequest) => {
       const response = await window.electron.updateProfile(values);
-      return updateUserDetails(response);
+      return updateUserDetails({
+        ...response,
+        username: userDetails?.username || "",
+      });
     },
     [updateUserDetails]
   );
@@ -92,11 +97,21 @@ export function useUserDetails() {
     return window.electron
       .getFriendRequests()
       .then((friendRequests) => {
+        syncFriendRequests();
         dispatch(setFriendRequests(friendRequests));
       })
       .catch(() => {});
   }, [dispatch]);
 
+  const syncFriendRequests = useCallback(async () => {
+    return window.electron
+      .syncFriendRequests()
+      .then((sync) => {
+        dispatch(setFriendRequestCount(sync.friendRequestCount));
+      })
+      .catch(() => {});
+  }, [dispatch]);
+
   const showFriendsModal = useCallback(
     (initialTab: UserFriendModalTab, userId: string) => {
       dispatch(setFriendsModalVisible({ initialTab, userId }));
@@ -140,6 +155,7 @@ export function useUserDetails() {
     userDetails,
     profileBackground,
     friendRequests,
+    friendRequestCount,
     friendRequetsModalTab,
     isFriendsModalVisible,
     friendModalUserId,
@@ -152,6 +168,7 @@ export function useUserDetails() {
     patchUser,
     sendFriendRequest,
     fetchFriendRequests,
+    syncFriendRequests,
     updateFriendRequestState,
     blockUser,
     unblockUser,

src/renderer/src/pages/game-details/game-details.css.ts

@@ -149,8 +149,7 @@ export const randomizerButton = style({
   animationName: slideIn,
   animationDuration: "0.2s",
   position: "fixed",
-  /* Bottom panel height + spacing */
-  bottom: `${26 + SPACING_UNIT * 2}px`,
+  bottom: `${SPACING_UNIT * 3}px`,
   /* Scroll bar + spacing */
   right: `${9 + SPACING_UNIT * 2}px`,
   boxShadow: "rgba(255, 255, 255, 0.1) 0px 0px 10px 1px",

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

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
 import type { HowLongToBeatCategory, SteamAppDetails } from "@types";
 import { useTranslation } from "react-i18next";
 import { Button } from "@renderer/components";
@@ -9,7 +9,7 @@ import { useFormat } from "@renderer/hooks";
 import { DownloadIcon, PeopleIcon } from "@primer/octicons-react";
 
 export function Sidebar() {
-  const [_howLongToBeat, setHowLongToBeat] = useState<{
+  const [_howLongToBeat, _setHowLongToBeat] = useState<{
     isLoading: boolean;
     data: HowLongToBeatCategory[] | null;
   }>({ isLoading: true, data: null });
@@ -17,27 +17,26 @@ export function Sidebar() {
   const [activeRequirement, setActiveRequirement] =
     useState<keyof SteamAppDetails["pc_requirements"]>("minimum");
 
-  const { gameTitle, shopDetails, objectID, stats } =
-    useContext(gameDetailsContext);
+  const { gameTitle, shopDetails, stats } = useContext(gameDetailsContext);
 
   const { t } = useTranslation("game_details");
 
   const { numberFormatter } = useFormat();
 
-  useEffect(() => {
-    if (objectID) {
-      setHowLongToBeat({ isLoading: true, data: null });
+  // useEffect(() => {
+  //   if (objectID) {
+  //     setHowLongToBeat({ isLoading: true, data: null });
 
-      window.electron
-        .getHowLongToBeat(objectID, "steam", gameTitle)
-        .then((howLongToBeat) => {
-          setHowLongToBeat({ isLoading: false, data: howLongToBeat });
-        })
-        .catch(() => {
-          setHowLongToBeat({ isLoading: false, data: null });
-        });
-    }
-  }, [objectID, gameTitle]);
+  //     window.electron
+  //       .getHowLongToBeat(objectID, "steam", gameTitle)
+  //       .then((howLongToBeat) => {
+  //         setHowLongToBeat({ isLoading: false, data: howLongToBeat });
+  //       })
+  //       .catch(() => {
+  //         setHowLongToBeat({ isLoading: false, data: null });
+  //       });
+  //   }
+  // }, [objectID, gameTitle]);
 
   return (
     <aside className={styles.contentSidebar}>

src/renderer/src/pages/home/home.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -8,10 +8,11 @@ import { Button, GameCard, Hero } from "@renderer/components";
 import type { Steam250Game, CatalogueEntry } from "@types";
 
 import starsAnimation from "@renderer/assets/lottie/stars.json";
+import flameAnimation from "@renderer/assets/lottie/flame.json";
 
 import * as styles from "./home.css";
-import { vars } from "@renderer/theme.css";
-import Lottie from "lottie-react";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import Lottie, { type LottieRefCurrentProps } from "lottie-react";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { CatalogueCategory } from "@shared";
 
@@ -19,6 +20,8 @@ export function Home() {
   const { t } = useTranslation("home");
   const navigate = useNavigate();
 
+  const flameAnimationRef = useRef<LottieRefCurrentProps>(null);
+
   const [isLoading, setIsLoading] = useState(false);
   const [randomGame, setRandomGame] = useState<Steam250Game | null>(null);
 
@@ -82,6 +85,18 @@ export function Home() {
 
   const categories = Object.values(CatalogueCategory);
 
+  const handleMouseEnterCategory = (category: CatalogueCategory) => {
+    if (category === CatalogueCategory.Hot) {
+      flameAnimationRef?.current?.play();
+    }
+  };
+
+  const handleMouseLeaveCategory = (category: CatalogueCategory) => {
+    if (category === CatalogueCategory.Hot) {
+      flameAnimationRef?.current?.stop();
+    }
+  };
+
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <section className={styles.content}>
@@ -100,7 +115,28 @@ export function Home() {
                       : "outline"
                   }
                   onClick={() => handleCategoryClick(category)}
+                  onMouseEnter={() => handleMouseEnterCategory(category)}
+                  onMouseLeave={() => handleMouseLeaveCategory(category)}
                 >
+                  {category === CatalogueCategory.Hot && (
+                    <div
+                      style={{ width: 16, height: 16, position: "relative" }}
+                    >
+                      <Lottie
+                        lottieRef={flameAnimationRef}
+                        animationData={flameAnimation}
+                        loop
+                        autoplay={false}
+                        style={{
+                          width: 30,
+                          top: -10,
+                          left: -5,
+                          position: "absolute",
+                        }}
+                      />
+                    </div>
+                  )}
+
                   {t(category)}
                 </Button>
               </li>
@@ -116,14 +152,32 @@ export function Home() {
               <Lottie
                 animationData={starsAnimation}
                 style={{ width: 70, position: "absolute", top: -28, left: -27 }}
-                loop
+                loop={Boolean(randomGame)}
               />
             </div>
             {t("surprise_me")}
           </Button>
         </section>
 
-        <h2>{t(currentCatalogueCategory)}</h2>
+        <h2 style={{ display: "flex", gap: SPACING_UNIT }}>
+          {currentCatalogueCategory === CatalogueCategory.Hot && (
+            <div style={{ width: 24, height: 24, position: "relative" }}>
+              <Lottie
+                animationData={flameAnimation}
+                loop
+                autoplay
+                style={{
+                  width: 40,
+                  top: -10,
+                  left: -5,
+                  position: "absolute",
+                }}
+              />
+            </div>
+          )}
+
+          {t(currentCatalogueCategory)}
+        </h2>
 
         <section className={styles.cards}>
           {isLoading

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

@@ -155,6 +155,7 @@ export const listItemImage = style({
   width: "32px",
   height: "32px",
   borderRadius: "4px",
+  objectFit: "cover",
 });
 
 export const listItemDetails = style({

src/types/index.ts

@@ -170,6 +170,10 @@ export interface UserBlocks {
   blocks: UserFriend[];
 }
 
+export interface FriendRequestSync {
+  friendRequestCount: number;
+}
+
 export interface FriendRequest {
   id: string;
   displayName: string;
@@ -190,23 +194,34 @@ export interface UserProfileCurrentGame extends Omit<GameRunning, "objectID"> {
   sessionDurationInSeconds: number;
 }
 
+export type ProfileVisibility = "PUBLIC" | "PRIVATE" | "FRIENDS";
+
+export interface UserDetails {
+  id: string;
+  username: string;
+  displayName: string;
+  profileImageUrl: string | null;
+  profileVisibility: ProfileVisibility;
+  bio: string;
+}
+
 export interface UserProfile {
   id: string;
   displayName: string;
   profileImageUrl: string | null;
-  profileVisibility: "PUBLIC" | "PRIVATE" | "FRIENDS";
-  totalPlayTimeInSeconds: number;
+  profileVisibility: ProfileVisibility;
   libraryGames: UserGame[];
   recentGames: UserGame[];
   friends: UserFriend[];
   totalFriends: number;
   relation: UserRelation | null;
   currentGame: UserProfileCurrentGame | null;
+  bio: string;
 }
 
 export interface UpdateProfileRequest {
   displayName?: string;
-  profileVisibility?: "PUBLIC" | "PRIVATE" | "FRIENDS";
+  profileVisibility?: ProfileVisibility;
   profileImageUrl?: string | null;
   bio?: string;
 }