game background image profile page

src/locales/en/translation.json

@@ -16,7 +16,8 @@
     "filter": "Filter library",
     "home": "Home",
     "queued": "{{title}} (Queued)",
-    "game_has_no_executable": "Game has no executable selected"
+    "game_has_no_executable": "Game has no executable selected",
+    "signin": "Sign in"
   },
   "header": {
     "search": "Search games",

src/locales/pt/translation.json

@@ -16,7 +16,8 @@
     "filter": "Filtrar biblioteca",
     "home": "Início",
     "queued": "{{title}} (Na fila)",
-    "game_has_no_executable": "Jogo não possui executável selecionado"
+    "game_has_no_executable": "Jogo não possui executável selecionado",
+    "signin": "Login"
   },
   "header": {
     "search": "Buscar jogos",

src/renderer/src/app.tsx

@@ -118,7 +118,7 @@ export function App() {
     return () => {
       unsubscribe();
     };
-  }, [dispatch]);
+  }, [dispatch, library]);
 
   useEffect(() => {
     const listeners = [

src/renderer/src/components/sidebar/sidebar-profile.css.ts

@@ -20,6 +20,7 @@ export const profileButtonContent = style({
   alignItems: "center",
   gap: `${SPACING_UNIT + SPACING_UNIT / 2}px`,
   height: "40px",
+  width: "100%",
 });
 
 export const profileAvatar = style({
@@ -39,6 +40,7 @@ export const profileButtonInformation = style({
   display: "flex",
   flexDirection: "column",
   alignItems: "flex-start",
+  flex: "1",
 });
 
 export const statusBadge = style({

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

@@ -4,10 +4,13 @@ import * as styles from "./sidebar-profile.css";
 
 import { useAppSelector, useUserDetails } from "@renderer/hooks";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 
 export function SidebarProfile() {
   const navigate = useNavigate();
 
+  const { t } = useTranslation("sidebar");
+
   const { userDetails, profileBackground } = useUserDetails();
 
   const { runningGame } = useAppSelector((state) => state.runningGame);
@@ -48,7 +51,7 @@ export function SidebarProfile() {
 
         <div className={styles.profileButtonInformation}>
           <p className={styles.profileButtonTitle}>
-            {userDetails ? userDetails.displayName : "Sign in"}
+            {userDetails ? userDetails.displayName : t("signin")}
           </p>
 
           {userDetails && runningGame && (

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

@@ -6,7 +6,7 @@ import { SPACING_UNIT, vars } from "@renderer/theme.css";
 import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
-import { useDate, useUserDetails } from "@renderer/hooks";
+import { useAppSelector, useDate, useUserDetails } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
 import { buildGameDetailsPath } from "@renderer/helpers";
 import { PersonIcon, TelescopeIcon } from "@primer/octicons-react";
@@ -32,6 +32,8 @@ export function UserContent({
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
 
+  const { runningGame } = useAppSelector((state) => state.runningGame);
+
   const navigate = useNavigate();
 
   const numberFormatter = useMemo(() => {
@@ -98,10 +100,27 @@ export function UserContent({
       <section
         className={styles.profileContentBox}
         style={{
-          background: profileContentBoxBackground,
           padding: `${SPACING_UNIT * 3}px ${SPACING_UNIT * 2}px`,
+          position: "relative",
         }}
       >
+        <div
+          style={{
+            background: profileContentBoxBackground,
+            position: "absolute",
+            inset: 0,
+          }}
+        ></div>
+        <div
+          style={{
+            background: `url(${runningGame?.iconUrl})`,
+            position: "absolute",
+            inset: 0,
+            opacity: 0.1,
+            backgroundSize: "cover",
+          }}
+        ></div>
+
         <div className={styles.profileAvatarContainer}>
           {userProfile.profileImageUrl ? (
             <img
@@ -116,10 +135,45 @@ export function UserContent({
 
         <div className={styles.profileInformation}>
           <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
+          {isMe && runningGame && (
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: `${SPACING_UNIT / 2}px`,
+              }}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "row",
+                  gap: `${SPACING_UNIT}px`,
+                  alignItems: "center",
+                }}
+              >
+                <p>{runningGame.title}</p>
+              </div>
+              <small>
+                {t("playing_for", {
+                  amount: formatDistance(
+                    runningGame.sessionStartTimestamp,
+                    new Date()
+                  ),
+                })}
+              </small>
+            </div>
+          )}
         </div>
 
         {isMe && (
-          <div style={{ flex: 1, display: "flex", justifyContent: "end" }}>
+          <div
+            style={{
+              flex: 1,
+              display: "flex",
+              justifyContent: "end",
+              zIndex: 1,
+            }}
+          >
             <div
               style={{
                 display: "flex",

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

@@ -33,6 +33,7 @@ export const profileAvatarContainer = style({
   overflow: "hidden",
   border: `solid 1px ${vars.color.border}`,
   boxShadow: "0px 0px 5px 0px rgba(0, 0, 0, 0.7)",
+  zIndex: 1,
 });
 
 export const profileAvatarEditContainer = style({
@@ -56,7 +57,6 @@ export const profileAvatar = style({
   borderRadius: "50%",
   overflow: "hidden",
   objectFit: "cover",
-  animationPlayState: "paused",
 });
 
 export const profileAvatarEditOverlay = style({
@@ -75,6 +75,7 @@ export const profileInformation = style({
   gap: `${SPACING_UNIT}px`,
   alignItems: "flex-start",
   color: "#c0c1c7",
+  zIndex: 1,
 });
 
 export const profileContent = style({

src/types/index.ts

@@ -133,6 +133,7 @@ export interface RunningGame {
   objectID: string;
   shop: GameShop;
   sessionStartTimestamp: number;
+  cover: string;
 }
 
 export interface DownloadProgress {