feat: adding time played / last played

src/locales/pt/translation.json

@@ -225,5 +225,8 @@
   },
   "forms": {
     "toggle_password_visibility": "Alternar visibilidade da senha"
+  },
+  "user_profile": {
+    "amount_hours": "Jogou por {{amount}}"
   }
 }

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

@@ -24,7 +24,11 @@ const getUserProfile = async (
           ? getSteamAppAsset("icon", game.objectId, steamGame.clientIcon)
           : null;
 
-        return { ...convertSteamGameToCatalogueEntry(steamGame), iconUrl };
+        return {
+          ...game,
+          ...convertSteamGameToCatalogueEntry(steamGame),
+          iconUrl,
+        };
       })
     );
 
@@ -37,7 +41,11 @@ const getUserProfile = async (
           ? getSteamAppAsset("icon", game.objectId, steamGame.clientIcon)
           : null;
 
-        return { ...convertSteamGameToCatalogueEntry(steamGame), iconUrl };
+        return {
+          ...game,
+          ...convertSteamGameToCatalogueEntry(steamGame),
+          iconUrl,
+        };
       })
     );
 

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

@@ -144,7 +144,7 @@ export function Sidebar() {
   };
 
   const handleClickProfile = () => {
-    navigate("/profile/pmbk5ezJ");
+    navigate("/profile/olejRejN");
   };
 
   return (

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

@@ -1,13 +1,41 @@
-import { UserProfile } from "@types";
+import { ProfileGame, UserProfile } from "@types";
 import cn from "classnames";
 import * as styles from "./profile.css";
 import { SPACING_UNIT, vars } from "@renderer/theme.css";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { formatDistance } from "date-fns";
 
 export interface ProfileContentProps {
   userProfile: UserProfile;
 }
 
+const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
+
 export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
+  const { t, i18n } = useTranslation("user_profile");
+
+  const numberFormatter = useMemo(() => {
+    return new Intl.NumberFormat(i18n.language, {
+      maximumFractionDigits: 0,
+    });
+  }, [i18n.language]);
+
+  const formatPlayTime = (game: ProfileGame) => {
+    console.log(game);
+    const seconds = game.playTimeInSeconds;
+    const minutes = seconds / 60;
+
+    if (minutes < MAX_MINUTES_TO_SHOW_IN_PLAYTIME) {
+      return t("amount_minutes", {
+        amount: minutes.toFixed(0),
+      });
+    }
+
+    const hours = minutes / 60;
+    return t("amount_hours", { amount: numberFormatter.format(hours) });
+  };
+
   return (
     <>
       <section className={styles.profileContentBox}>
@@ -46,12 +74,18 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
             </h3>
           </div>
           <div
-            className={styles.profileContentBox}
-            style={{ flexDirection: "column" }}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: `${SPACING_UNIT}px`,
+            }}
           >
             {userProfile.recentGames.map((game) => {
               return (
-                <div key={game.objectID} className={styles.feedItem}>
+                <div
+                  key={game.objectID}
+                  className={cn(styles.feedItem, styles.profileContentBox)}
+                >
                   <img
                     className={styles.gameIcon}
                     src={game.iconUrl}
@@ -61,7 +95,11 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
                   />
                   <div className={styles.gameInformation}>
                     <p>{game.title}</p>
-                    <p>há 3 horas</p>
+                    <p>
+                      {formatDistance(game.lastTimePlayed!, new Date(), {
+                        addSuffix: true,
+                      })}
+                    </p>
                   </div>
                 </div>
               );
@@ -91,12 +129,18 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
             </h3>
           </div>
           <div
-            className={styles.profileContentBox}
-            style={{ flexDirection: "column" }}
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: `${SPACING_UNIT}px`,
+            }}
           >
             {userProfile.libraryGames.map((game) => {
               return (
-                <div key={game.objectID} className={styles.gameListItem}>
+                <div
+                  key={game.objectID}
+                  className={cn(styles.gameListItem, styles.profileContentBox)}
+                >
                   <img
                     className={styles.gameIcon}
                     src={game.iconUrl}
@@ -106,7 +150,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
                   />
                   <div className={styles.gameInformation}>
                     <p>{game.title}</p>
-                    <p>Jogou por 10 horas</p>
+                    <p>{formatPlayTime(game)}</p>
                   </div>
                 </div>
               );

src/renderer/src/pages/profile/profile.css.tsx

@@ -46,7 +46,7 @@ export const profileGameSection = style({
   width: "100%",
   display: "flex",
   flexDirection: "column",
-  gap: `${SPACING_UNIT}px`,
+  gap: `${SPACING_UNIT * 2}px`,
 });
 
 export const contentSidebar = style({

src/types/index.ts

@@ -91,6 +91,8 @@ export interface ProfileGame {
   title: string;
   iconUrl;
   string?;
+  playTimeInSeconds: number;
+  lastTimePlayed: Date | null;
 }
 
 export interface DownloadQueue {