feat: show running game on sidebar

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,
   },
 });