feat: signout modal text

src/main/services/process-watcher.ts

@@ -5,7 +5,7 @@ import { gameRepository } from "@main/repository";
 import { getProcesses } from "@main/helpers";
 import { WindowManager } from "./window-manager";
 import { createGame, updateGamePlaytime } from "./library-sync";
-import { RunningGameEvent } from "@types";
+import { GameRunning } from "@types";
 
 const gamesPlaytime = new Map<
   number,
@@ -93,7 +93,7 @@ export const watchProcesses = async () => {
   }
 
   if (WindowManager.mainWindow) {
-    const runningGames = Array.from(gamesPlaytime.entries()).map((entry) => {
+    const gamesRunning = Array.from(gamesPlaytime.entries()).map((entry) => {
       return {
         id: entry[0],
         sessionDurationInMillis: performance.now() - entry[1].firstTick,
@@ -102,7 +102,7 @@ export const watchProcesses = async () => {
 
     WindowManager.mainWindow.webContents.send(
       "on-games-running",
-      runningGames as RunningGameEvent
+      gamesRunning as Pick<GameRunning, "id" | "sessionDurationInMillis">[]
     );
   }
 };

src/preload/index.ts

@@ -8,7 +8,7 @@ import type {
   UserPreferences,
   AppUpdaterEvent,
   StartGameDownloadPayload,
-  RunningGameEvent,
+  GameRunning,
 } from "@types";
 
 contextBridge.exposeInMainWorld("electron", {
@@ -85,11 +85,13 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("deleteGameFolder", gameId),
   getGameByObjectID: (objectID: string) =>
     ipcRenderer.invoke("getGameByObjectID", objectID),
-  onRunningGames: (cb: (runningGames: RunningGameEvent) => void) => {
+  onGamesRunning: (
-    const listener = (
+    cb: (
-      _event: Electron.IpcRendererEvent,
+      gamesRunning: Pick<GameRunning, "id" | "sessionDurationInMillis">[]
-      runningGames: RunningGameEvent
+    ) => void
-    ) => cb(runningGames);
+  ) => {
+    const listener = (_event: Electron.IpcRendererEvent, gamesRunning) =>
+      cb(gamesRunning);
     ipcRenderer.on("on-games-running", listener);
     return () => ipcRenderer.removeListener("on-games-running", listener);
   },

src/renderer/src/app.tsx

@@ -21,7 +21,7 @@ import {
   closeToast,
   setUserDetails,
   setProfileBackground,
-  setRunningGame,
+  setGameRunning,
 } from "@renderer/features";
 
 export interface AppProps {
@@ -97,16 +97,16 @@ export function App() {
   }, [dispatch, fetchUserDetails]);
 
   useEffect(() => {
-    const unsubscribe = window.electron.onRunningGames((runningGames) => {
+    const unsubscribe = window.electron.onGamesRunning((gamesRunning) => {
-      if (runningGames.length) {
+      if (gamesRunning.length) {
-        const lastGame = runningGames[runningGames.length - 1];
+        const lastGame = gamesRunning[gamesRunning.length - 1];
         const libraryGame = library.find(
           (library) => library.id === lastGame.id
         );
 
         if (libraryGame) {
           dispatch(
-            setRunningGame({
+            setGameRunning({
               ...libraryGame,
               sessionDurationInMillis: lastGame.sessionDurationInMillis,
             })
@@ -114,7 +114,7 @@ export function App() {
           return;
         }
       }
-      dispatch(setRunningGame(null));
+      dispatch(setGameRunning(null));
     });
 
     return () => {

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

@@ -13,7 +13,7 @@ export function SidebarProfile() {
 
   const { userDetails, profileBackground } = useUserDetails();
 
-  const { runningGame } = useAppSelector((state) => state.runningGame);
+  const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
   const handleButtonClick = () => {
     if (userDetails === null) {
@@ -54,19 +54,19 @@ export function SidebarProfile() {
             {userDetails ? userDetails.displayName : t("sign_in")}
           </p>
 
-          {userDetails && runningGame && (
+          {userDetails && gameRunning && (
             <div>
-              <small>{runningGame.title}</small>
+              <small>{gameRunning.title}</small>
             </div>
           )}
         </div>
 
-        {userDetails && runningGame && (
+        {userDetails && gameRunning && (
           <img
-            alt={runningGame.title}
+            alt={gameRunning.title}
             width={24}
             style={{ borderRadius: 4 }}
-            src={runningGame.iconUrl}
+            src={gameRunning.iconUrl}
           />
         )}
       </div>

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

@@ -109,10 +109,10 @@ export function GameDetailsContextProvider({
   }, [objectID, gameTitle, dispatch]);
 
   useEffect(() => {
-    const unsubscribe = window.electron.onRunningGames((gamesIds) => {
+    const unsubscribe = window.electron.onGamesRunning((gamesIds) => {
       const updatedIsGameRunning =
         !!game?.id &&
-        !!gamesIds.find((runningGame) => runningGame.id == game.id);
+        !!gamesIds.find((gameRunning) => gameRunning.id == game.id);
 
       if (isGameRunning != updatedIsGameRunning) {
         updateGame();

src/renderer/src/declaration.d.ts

@@ -14,7 +14,6 @@ import type {
   RealDebridUser,
   DownloadSource,
   UserProfile,
-  RunningGameEvent,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -72,8 +71,10 @@ declare global {
     removeGame: (gameId: number) => Promise<void>;
     deleteGameFolder: (gameId: number) => Promise<unknown>;
     getGameByObjectID: (objectID: string) => Promise<Game | null>;
-    onRunningGames: (
+    onGamesRunning: (
-      cb: (runningGames: RunningGameEvent) => void
+      cb: (
+        gamesRunning: Pick<GameRunning, "id" | "sessionDurationInMillis">[]
+      ) => void
     ) => () => Electron.IpcRenderer;
     onLibraryBatchComplete: (cb: () => void) => () => Electron.IpcRenderer;
 

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

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

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

@@ -32,7 +32,7 @@ export function UserContent({
   const [showEditProfileModal, setShowEditProfileModal] = useState(false);
   const [showSignOutModal, setShowSignOutModal] = useState(false);
 
-  const { runningGame } = useAppSelector((state) => state.runningGame);
+  const { gameRunning } = useAppSelector((state) => state.gameRunning);
 
   const navigate = useNavigate();
 
@@ -104,10 +104,10 @@ export function UserContent({
           position: "relative",
         }}
       >
-        {runningGame && isMe && (
+        {gameRunning && isMe && (
           <div
             style={{
-              backgroundImage: `url(${steamUrlBuilder.libraryHero(runningGame.objectID)})`,
+              backgroundImage: `url(${steamUrlBuilder.libraryHero(gameRunning.objectID)})`,
               backgroundPosition: "top",
               position: "absolute",
               inset: 0,
@@ -140,7 +140,7 @@ export function UserContent({
 
         <div className={styles.profileInformation}>
           <h2 style={{ fontWeight: "bold" }}>{userProfile.displayName}</h2>
-          {isMe && runningGame && (
+          {isMe && gameRunning && (
             <div
               style={{
                 display: "flex",
@@ -156,12 +156,12 @@ export function UserContent({
                   alignItems: "center",
                 }}
               >
-                <p>{runningGame.title}</p>
+                <p>{gameRunning.title}</p>
               </div>
               <small>
                 {t("playing_for", {
                   amount: formatDiffInMillis(
-                    runningGame.sessionDurationInMillis,
+                    gameRunning.sessionDurationInMillis,
                     new Date()
                   ),
                 })}

src/renderer/src/store.ts

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

src/types/index.ts

@@ -127,12 +127,7 @@ export interface Game {
 
 export type LibraryGame = Omit<Game, "repacks">;
 
-export type RunningGameEvent = {
+export interface GameRunning {
-  id: number;
-  sessionDurationInMillis: number;
-}[];
-
-export interface RunningGame {
   id: number;
   title: string;
   iconUrl: string;