From e8a1aa0616e198d4988a7f3c169302fac5340142 Mon Sep 17 00:00:00 2001 From: Zamitto <167933696+zamitto@users.noreply.github.com> Date: Fri, 14 Jun 2024 18:23:57 -0300 Subject: [PATCH] feat: ui --- src/locales/en/translation.json | 6 ++ src/locales/pt/translation.json | 5 +- src/main/events/helpers/validators.ts | 1 + .../src/pages/profile/profile-content.tsx | 60 +++++++++++++------ .../src/pages/profile/profile.css.tsx | 26 +++++++- src/types/index.ts | 1 + 6 files changed, 78 insertions(+), 21 deletions(-) diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index b13a5da0..c4022a93 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -224,5 +224,11 @@ }, "forms": { "toggle_password_visibility": "Toggle password visibility" + }, + "user_profile": { + "amount_hours": "{{amount}} hours", + "amount_minutes": "{{amount}} minutes", + "play_time": "Played for {{amount}}", + "last_time_played": "Last played {{period}}" } } diff --git a/src/locales/pt/translation.json b/src/locales/pt/translation.json index 6f6855c1..0cfbc9f0 100644 --- a/src/locales/pt/translation.json +++ b/src/locales/pt/translation.json @@ -227,6 +227,9 @@ "toggle_password_visibility": "Alternar visibilidade da senha" }, "user_profile": { - "amount_hours": "Jogou por {{amount}}" + "amount_hours": "{{amount}} horas", + "amount_minutes": "{{amount}} minutos", + "play_time": "Jogado por {{amount}}", + "last_time_played": "Jogou por último {{period}}" } } diff --git a/src/main/events/helpers/validators.ts b/src/main/events/helpers/validators.ts index ccbfb877..68df8bfa 100644 --- a/src/main/events/helpers/validators.ts +++ b/src/main/events/helpers/validators.ts @@ -25,6 +25,7 @@ const gamesArray = z.array( export const userProfileSchema = z.object({ displayName: z.string(), + profileImageUrl: z.string().url().nullable(), libraryGames: gamesArray, recentGames: gamesArray, }); diff --git a/src/renderer/src/pages/profile/profile-content.tsx b/src/renderer/src/pages/profile/profile-content.tsx index 0c5388e5..1bb3c90a 100644 --- a/src/renderer/src/pages/profile/profile-content.tsx +++ b/src/renderer/src/pages/profile/profile-content.tsx @@ -4,8 +4,11 @@ import * as styles from "./profile.css"; import { SPACING_UNIT, vars } from "@renderer/theme.css"; import { useMemo } from "react"; import { useTranslation } from "react-i18next"; -import { formatDistance } from "date-fns"; import SteamLogo from "@renderer/assets/steam-logo.svg?react"; +import { useDate } from "@renderer/hooks"; +import { useNavigate } from "react-router-dom"; +import { buildGameDetailsPath } from "@renderer/helpers"; +import { PersonIcon } from "@primer/octicons-react"; export interface ProfileContentProps { userProfile: UserProfile; } @@ -15,14 +18,17 @@ const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120; export const ProfileContent = ({ userProfile }: ProfileContentProps) => { const { t, i18n } = useTranslation("user_profile"); + const navigate = useNavigate(); + const numberFormatter = useMemo(() => { return new Intl.NumberFormat(i18n.language, { maximumFractionDigits: 0, }); }, [i18n.language]); + const { formatDistance } = useDate(); + const formatPlayTime = (game: ProfileGame) => { - console.log(game); const seconds = game.playTimeInSeconds; const minutes = seconds / 60; @@ -36,17 +42,28 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => { return t("amount_hours", { amount: numberFormatter.format(hours) }); }; + const handleGameClick = (game: ProfileGame) => { + navigate(buildGameDetailsPath(game)); + }; + + console.log(userProfile); return ( <>
- {userProfile.displayName +
+ {userProfile.profileImageUrl ? ( + {userProfile.displayName} + ) : ( + + )} +

{userProfile.displayName}

@@ -67,24 +84,25 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => { > {userProfile.recentGames.map((game) => { return ( -
handleGameClick(game)} > {"Icon
-

{game.title}

-

+

{game.title}

+ {formatDistance(game.lastTimePlayed!, new Date(), { addSuffix: true, })} -

+
-
+ ); })}
@@ -120,12 +138,13 @@ export const ProfileContent = ({ userProfile }: ProfileContentProps) => { > {userProfile.libraryGames.map((game) => { return ( -
handleGameClick(game)} > {game.iconUrl ? ( { )}
-

{game.title}

-

{formatPlayTime(game)}

+

{game.title}

+ + + {t("play_time", { + amount: formatPlayTime(game), + })} +
-
+ ); })} diff --git a/src/renderer/src/pages/profile/profile.css.tsx b/src/renderer/src/pages/profile/profile.css.tsx index 5110b63c..93b09d98 100644 --- a/src/renderer/src/pages/profile/profile.css.tsx +++ b/src/renderer/src/pages/profile/profile.css.tsx @@ -16,9 +16,10 @@ export const profileContentBox = style({ borderRadius: "4px", border: `solid 1px ${vars.color.border}`, width: "100%", + overflow: "hidden", }); -export const profileAvatar = style({ +export const profileAvatarContainer = style({ width: "96px", height: "96px", borderRadius: "50%", @@ -27,6 +28,12 @@ export const profileAvatar = style({ alignItems: "center", backgroundColor: vars.color.background, position: "relative", + overflow: "hidden", +}); + +export const profileAvatar = style({ + width: "96px", + height: "96px", }); export const profileInformation = style({ @@ -84,25 +91,40 @@ export const libraryGameIcon = style({ }); export const feedItem = style({ + color: vars.color.body, display: "flex", flexDirection: "row", - gap: `${SPACING_UNIT}px`, + gap: `${SPACING_UNIT * 2}px`, width: "100%", height: "72px", + transition: "all ease 0.2s", + cursor: "pointer", + zIndex: "1", + ":hover": { + backgroundColor: "rgba(255, 255, 255, 0.15)", + }, }); export const gameListItem = style({ + color: vars.color.body, display: "flex", flexDirection: "row", gap: `${SPACING_UNIT}px`, width: "100%", height: "60px", + transition: "all ease 0.2s", + cursor: "pointer", + zIndex: "1", + ":hover": { + backgroundColor: "rgba(255, 255, 255, 0.15)", + }, }); export const gameInformation = style({ display: "flex", flexDirection: "column", alignItems: "flex-start", + gap: `${SPACING_UNIT / 2}px`, }); export const profileHeaderSkeleton = style({ diff --git a/src/types/index.ts b/src/types/index.ts index 0a85099e..56816d08 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -246,6 +246,7 @@ export interface RealDebridUser { export interface UserProfile { displayName: string; + profileImageUrl: string | null; libraryGames: ProfileGame[]; recentGames: ProfileGame[]; }