diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 8564b01d..a3b6cd09 100644 --- a/src/locales/en/translation.json +++ b/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", diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index 209279e2..bb53cb23 100644 --- a/src/locales/pt/translation.json +++ b/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", diff --git a/src/renderer/src/app.tsx b/src/renderer/src/app.tsx index ba98a653..3d7437b6 100644 --- a/src/renderer/src/app.tsx +++ b/src/renderer/src/app.tsx @@ -118,7 +118,7 @@ export function App() { return () => { unsubscribe(); }; - }, [dispatch]); + }, [dispatch, library]); useEffect(() => { const listeners = [ diff --git a/src/renderer/src/components/sidebar/sidebar-profile.css.ts b/src/renderer/src/components/sidebar/sidebar-profile.css.ts index 9681c866..7fe6e4ec 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.css.ts +++ b/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({ diff --git a/src/renderer/src/components/sidebar/sidebar-profile.tsx b/src/renderer/src/components/sidebar/sidebar-profile.tsx index a7f8ea78..2f4dc600 100644 --- a/src/renderer/src/components/sidebar/sidebar-profile.tsx +++ b/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() {

- {userDetails ? userDetails.displayName : "Sign in"} + {userDetails ? userDetails.displayName : t("signin")}

{userDetails && runningGame && ( diff --git a/src/renderer/src/pages/user/user-content.tsx b/src/renderer/src/pages/user/user-content.tsx index 5b4798e7..ff5b879b 100644 --- a/src/renderer/src/pages/user/user-content.tsx +++ b/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({
+
+
+
{userProfile.profileImageUrl ? (

{userProfile.displayName}

+ {isMe && runningGame && ( +
+
+

{runningGame.title}

+
+ + {t("playing_for", { + amount: formatDistance( + runningGame.sessionStartTimestamp, + new Date() + ), + })} + +
+ )}
{isMe && ( -
+