feat: structure profile content and update response

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

@@ -3,7 +3,7 @@ import { userProfileSchema } from "../helpers/validators";
 import { logger } from "@main/services";
 import { HydraApi } from "@main/services/hydra-api";
 import { steamGamesWorker } from "@main/workers";
-import { LibraryGame, SteamGame, UserProfile } from "@types";
+import { UserProfile } from "@types";
 
 const getUserProfile = async (
   _event: Electron.IpcMainInvokeEvent,
@@ -32,7 +32,7 @@ const getUserProfile = async (
       })
     );
 
-    return { ...profile, game: libraryGames, recentGames };
+    return { ...profile, libraryGames, recentGames };
   } catch (err) {
     logger.error(`getUserProfile: ${username}`, err);
     return null;

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

@@ -1,6 +1,7 @@
 import { UserProfile } from "@types";
 import { useTranslation } from "react-i18next";
 import * as styles from "./profile.css";
+import { SPACING_UNIT, vars } from "@renderer/theme.css";
 
 export interface ProfileContentProps {
   userProfile: UserProfile;
@@ -12,7 +13,7 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
   console.log(userProfile.recentGames);
   return (
     <>
-      <section className={styles.profileHeader}>
+      <section className={styles.profileContentBox}>
         <img
           className={styles.profileAvatar}
           src="https://avatars.githubusercontent.com/u/167933696?v=4"
@@ -23,15 +24,71 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => {
           <p style={{ fontSize: 12 }}>Jogando ABC</p>
         </div>
       </section>
-      <h2>Feed</h2>
-      {userProfile.recentGames.map((game) => {
-        return <p key={game.objectID}>{game.title}</p>;
-      })}
 
-      <h2>Games</h2>
-      {userProfile.game.map((game) => {
-        return <p key={game.objectID}>{game.title}</p>;
-      })}
+      <div className={styles.profileContent}>
+        <div style={{ width: "100%" }}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: `${SPACING_UNIT * 2}px`,
+            }}
+          >
+            <h2>Feed</h2>
+
+            <div
+              style={{
+                flex: 1,
+                backgroundColor: vars.color.border,
+                height: "1px",
+              }}
+            />
+            <h3 style={{ fontWeight: "400" }}>
+              {userProfile.recentGames.length}
+            </h3>
+          </div>
+          <div
+            className={styles.profileContentBox}
+            style={{ flexDirection: "column" }}
+          >
+            {userProfile.recentGames.map((game) => {
+              return <p key={game.objectID}>{game.title}</p>;
+            })}
+          </div>
+        </div>
+
+        <div className={styles.contentSidebar}>
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              gap: `${SPACING_UNIT * 2}px`,
+            }}
+          >
+            <h2>Games</h2>
+            <div
+              style={{
+                flex: 1,
+                backgroundColor: vars.color.border,
+                height: "1px",
+              }}
+            />
+            <h3 style={{ fontWeight: "400" }}>
+              {userProfile.libraryGames.length}
+            </h3>
+          </div>
+          <div
+            className={styles.profileContentBox}
+            style={{ flexDirection: "column" }}
+          >
+            {userProfile.libraryGames.map((game) => {
+              return <p key={game.objectID}>{game.title}</p>;
+            })}
+          </div>
+        </div>
+      </div>
     </>
   );
 };

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

@@ -6,14 +6,14 @@ export const wrapper = style({
   width: "100%",
   display: "flex",
   flexDirection: "column",
+  gap: `${SPACING_UNIT * 2}px`,
 });
 
-export const profileHeader = style({
+export const profileContentBox = style({
   display: "flex",
   gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
   alignItems: "center",
   padding: `${SPACING_UNIT * 2}px ${SPACING_UNIT * 2}px`,
-  color: vars.color.muted,
   borderRadius: "4px",
   border: `solid 1px ${vars.color.border}`,
   width: "100%",
@@ -39,3 +39,28 @@ export const profileInformation = style({
 export const profileHeaderSkeleton = style({
   height: "200px",
 });
+
+export const profileContent = style({
+  display: "flex",
+  flexDirection: "row",
+  gap: `${SPACING_UNIT * 4}px`,
+});
+
+export const contentSidebar = style({
+  width: "100%",
+  height: "100%",
+  "@media": {
+    "(min-width: 768px)": {
+      width: "100%",
+      maxWidth: "200px",
+    },
+    "(min-width: 1024px)": {
+      maxWidth: "300px",
+      width: "100%",
+    },
+    "(min-width: 1280px)": {
+      width: "100%",
+      maxWidth: "400px",
+    },
+  },
+});

src/types/index.ts

@@ -236,7 +236,7 @@ export interface RealDebridUser {
 
 export interface UserProfile {
   username: string;
-  game: Partial<CatalogueEntry>[];
+  libraryGames: Partial<CatalogueEntry>[];
   recentGames: Partial<CatalogueEntry>[];
 }