feat: show running game on sidebar

src/locales/en/translation.json

@@ -243,6 +243,7 @@
     "try_again": "Please, try again",
     "signout_modal_title": "Are you sure?",
     "cancel": "Cancel",
-    "signout": "Sign Out"
+    "signout": "Sign Out",
+    "playing_for": "Playing for {{amount}}"
   }
 }

src/locales/pt/translation.json

@@ -243,6 +243,7 @@
     "try_again": "Por favor, tente novamente",
     "cancel": "Cancelar",
     "signout": "Sair da conta",
-    "signout_modal_title": "Tem certeza?"
+    "signout_modal_title": "Tem certeza?",
+    "playing_for": "Jogando por {{amount}}"
   }
 }

src/main/events/profile/update-profile.ts

@@ -27,8 +27,6 @@ const updateProfile = async (
   displayName: string,
   newProfileImagePath: string | null
 ): Promise<UserProfile> => {
-  console.log(newProfileImagePath);
-
   if (!newProfileImagePath) {
     return (await patchUserProfile(displayName)).data;
   }

src/main/services/hydra-api.ts

@@ -64,7 +64,7 @@ export class HydraApi {
     this.instance.interceptors.request.use(
       (request) => {
         console.log(" ---- REQUEST -----");
-        console.log(request.method, request.url, request.data);
+        console.log(request.method, request.url, request.headers, request.data);
         return request;
       },
       (error) => {

src/renderer/src/app.tsx

@@ -21,6 +21,7 @@ import {
   closeToast,
   setUserDetails,
   setProfileBackground,
+  setRunningGame,
 } from "@renderer/features";
 
 export interface AppProps {
@@ -29,7 +30,7 @@ export interface AppProps {
 
 export function App() {
   const contentRef = useRef<HTMLDivElement>(null);
-  const { updateLibrary } = useLibrary();
+  const { updateLibrary, library } = useLibrary();
 
   const { clearDownload, setLastPacket } = useDownload();
 
@@ -95,6 +96,30 @@ export function App() {
     });
   }, [dispatch, fetchUserDetails]);
 
+  useEffect(() => {
+    const unsubscribe = window.electron.onGamesRunning((gamesIds) => {
+      if (gamesIds.length) {
+        const lastGame = gamesIds.at(-1);
+        const libraryGame = library.find((library) => library.id == lastGame);
+
+        if (libraryGame) {
+          dispatch(
+            setRunningGame({
+              ...libraryGame,
+              sessionStartTimestamp: new Date().getTime(),
+            })
+          );
+          return;
+        }
+      }
+      dispatch(setRunningGame(null));
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  }, [dispatch]);
+
   useEffect(() => {
     const listeners = [
       window.electron.onSignIn(() => {

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

@@ -2,7 +2,7 @@ import { useNavigate } from "react-router-dom";
 import { PersonIcon } from "@primer/octicons-react";
 import * as styles from "./sidebar-profile.css";
 
-import { useUserDetails } from "@renderer/hooks";
+import { useAppSelector, useUserDetails } from "@renderer/hooks";
 import { useMemo } from "react";
 
 export function SidebarProfile() {
@@ -10,6 +10,8 @@ export function SidebarProfile() {
 
   const { userDetails, profileBackground } = useUserDetails();
 
+  const { runningGame } = useAppSelector((state) => state.runningGame);
+
   const handleButtonClick = () => {
     if (userDetails === null) {
       window.electron.openExternal("https://auth.hydra.losbroxas.org");
@@ -48,7 +50,21 @@ export function SidebarProfile() {
           <p className={styles.profileButtonTitle}>
             {userDetails ? userDetails.displayName : "Sign in"}
           </p>
+
+          {userDetails && runningGame && (
+            <div>
+              <small>{runningGame.title}</small>
+            </div>
+          )}
         </div>
+
+        {userDetails && runningGame && (
+          <img
+            width={24}
+            style={{ borderRadius: 4 }}
+            src={runningGame.iconUrl}
+          />
+        )}
       </div>
     </button>
   );

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

@@ -111,13 +111,13 @@ export function GameDetailsContextProvider({
   useEffect(() => {
     const listeners = [
       window.electron.onGamesRunning((gamesIds) => {
-        const newIsGameRunning = !!game?.id && gamesIds.includes(game.id);
+        const updatedIsGameRunning = !!game?.id && gamesIds.includes(game.id);
 
-        if (isGameRunning != newIsGameRunning) {
+        if (isGameRunning != updatedIsGameRunning) {
           updateGame();
         }
 
-        setisGameRunning(newIsGameRunning);
+        setisGameRunning(updatedIsGameRunning);
       }),
     ];
 

src/renderer/src/features/index.ts

@@ -5,3 +5,4 @@ export * from "./download-slice";
 export * from "./window-slice";
 export * from "./toast-slice";
 export * from "./user-details-slice";
+export * from "./running-game-slice";

src/renderer/src/features/running-game-slice.ts

@@ -0,0 +1,22 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { RunningGame } from "@types";
+
+export interface RunningGameState {
+  runningGame: RunningGame | null;
+}
+
+const initialState: RunningGameState = {
+  runningGame: null,
+};
+
+export const runningGameSlice = createSlice({
+  name: "running-game",
+  initialState,
+  reducers: {
+    setRunningGame: (state, action: PayloadAction<RunningGame | null>) => {
+      state.runningGame = action.payload;
+    },
+  },
+});
+
+export const { setRunningGame } = runningGameSlice.actions;

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

@@ -72,6 +72,7 @@ export const profileAvatarEditOverlay = style({
 export const profileInformation = style({
   display: "flex",
   flexDirection: "column",
+  gap: `${SPACING_UNIT}px`,
   alignItems: "flex-start",
   color: "#c0c1c7",
 });

src/renderer/src/pages/user/user.tsx

@@ -28,8 +28,6 @@ export const User = () => {
     getUserProfile();
   }, [getUserProfile]);
 
-  console.log(userProfile);
-
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <div className={styles.wrapper}>

src/renderer/src/store.ts

@@ -7,6 +7,7 @@ import {
   userPreferencesSlice,
   toastSlice,
   userDetailsSlice,
+  runningGameSlice,
 } from "@renderer/features";
 
 export const store = configureStore({
@@ -18,6 +19,7 @@ export const store = configureStore({
     download: downloadSlice.reducer,
     toast: toastSlice.reducer,
     userDetails: userDetailsSlice.reducer,
+    runningGame: runningGameSlice.reducer,
   },
 });
 

src/types/index.ts

@@ -127,6 +127,14 @@ export interface Game {
 
 export type LibraryGame = Omit<Game, "repacks">;
 
+export interface RunningGame {
+  title: string;
+  iconUrl: string;
+  objectID: string;
+  shop: GameShop;
+  sessionStartTimestamp: number;
+}
+
 export interface DownloadProgress {
   downloadSpeed: number;
   timeRemaining: number;