Merge branch 'main' into feat/context_menu-and-enhancement-actions

src/renderer/src/context/user-profile/user-profile.context.tsx

@@ -1,6 +1,6 @@
 import { darkenColor } from "@renderer/helpers";
 import { useAppSelector, useToast } from "@renderer/hooks";
-import type { Badge, UserProfile, UserStats } from "@types";
+import type { Badge, UserProfile, UserStats, UserGame } from "@types";
 import { average } from "color.js";
 
 import { createContext, useCallback, useEffect, useState } from "react";
@@ -17,6 +17,8 @@ export interface UserProfileContext {
   setSelectedBackgroundImage: React.Dispatch<React.SetStateAction<string>>;
   backgroundImage: string;
   badges: Badge[];
+  libraryGames: UserGame[];
+  pinnedGames: UserGame[];
 }
 
 export const DEFAULT_USER_PROFILE_BACKGROUND = "#151515B3";
@@ -30,6 +32,8 @@ export const userProfileContext = createContext<UserProfileContext>({
   setSelectedBackgroundImage: () => {},
   backgroundImage: "",
   badges: [],
+  libraryGames: [],
+  pinnedGames: [],
 });
 
 const { Provider } = userProfileContext;
@@ -49,6 +53,8 @@ export function UserProfileContextProvider({
   const [userStats, setUserStats] = useState<UserStats | null>(null);
 
   const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+  const [libraryGames, setLibraryGames] = useState<UserGame[]>([]);
+  const [pinnedGames, setPinnedGames] = useState<UserGame[]>([]);
   const [badges, setBadges] = useState<Badge[]>([]);
   const [heroBackground, setHeroBackground] = useState(
     DEFAULT_USER_PROFILE_BACKGROUND
@@ -85,8 +91,25 @@ export function UserProfileContextProvider({
     });
   }, [userId]);
 
+  const getUserLibraryGames = useCallback(async () => {
+    try {
+      const response = await window.electron.getUserLibrary(userId);
+      if (response) {
+        setLibraryGames(response.library);
+        setPinnedGames(response.pinnedGames);
+      } else {
+        setLibraryGames([]);
+        setPinnedGames([]);
+      }
+    } catch (error) {
+      setLibraryGames([]);
+      setPinnedGames([]);
+    }
+  }, [userId]);
+
   const getUserProfile = useCallback(async () => {
     getUserStats();
+    getUserLibraryGames();
 
     return window.electron.getUser(userId).then((userProfile) => {
       if (userProfile) {
@@ -102,7 +125,7 @@ export function UserProfileContextProvider({
         navigate(-1);
       }
     });
-  }, [navigate, getUserStats, showErrorToast, userId, t]);
+  }, [navigate, getUserStats, getUserLibraryGames, showErrorToast, userId, t]);
 
   const getBadges = useCallback(async () => {
     const badges = await window.electron.getBadges();
@@ -111,6 +134,8 @@ export function UserProfileContextProvider({
 
   useEffect(() => {
     setUserProfile(null);
+    setLibraryGames([]);
+    setPinnedGames([]);
     setHeroBackground(DEFAULT_USER_PROFILE_BACKGROUND);
 
     getUserProfile();
@@ -128,6 +153,8 @@ export function UserProfileContextProvider({
         backgroundImage: getBackgroundImageUrl(),
         userStats,
         badges,
+        libraryGames,
+        pinnedGames,
       }}
     >
       {children}

src/renderer/src/declaration.d.ts

@@ -37,6 +37,7 @@ import type {
   ShopDetailsWithAssets,
   AchievementCustomNotificationPosition,
   AchievementNotificationInfo,
+  UserLibraryResponse,
 } from "@types";
 import type { AxiosProgressEvent } from "axios";
 import type disk from "diskusage";
@@ -126,6 +127,8 @@ declare global {
       shop: GameShop,
       objectId: string
     ) => Promise<void>;
+    addGameToPinned: (shop: GameShop, objectId: string) => Promise<void>;
+    removeGameFromPinned: (shop: GameShop, objectId: string) => Promise<void>;
     updateLaunchOptions: (
       shop: GameShop,
       objectId: string,
@@ -287,6 +290,11 @@ declare global {
 
     /* User */
     getUser: (userId: string) => Promise<UserProfile | null>;
+    getUserLibrary: (
+      userId: string,
+      take?: number,
+      skip?: number
+    ) => Promise<UserLibraryResponse>;
     blockUser: (userId: string) => Promise<void>;
     unblockUser: (userId: string) => Promise<void>;
     getUserFriends: (

src/renderer/src/pages/game-details/hero/hero-panel-actions.tsx

@@ -3,11 +3,18 @@ import {
   GearIcon,
   HeartFillIcon,
   HeartIcon,
+  PinIcon,
+  PinSlashIcon,
   PlayIcon,
   PlusCircleIcon,
 } from "@primer/octicons-react";
 import { Button } from "@renderer/components";
-import { useDownload, useLibrary, useToast } from "@renderer/hooks";
+import {
+  useDownload,
+  useLibrary,
+  useToast,
+  useUserDetails,
+} from "@renderer/hooks";
 import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { gameDetailsContext } from "@renderer/context";
@@ -20,6 +27,7 @@ export function HeroPanelActions() {
     useState(false);
 
   const { isGameDeleting } = useDownload();
+  const { userDetails } = useUserDetails();
 
   const {
     game,
@@ -110,6 +118,29 @@ export function HeroPanelActions() {
     }
   };
 
+  const toggleGamePinned = async () => {
+    setToggleLibraryGameDisabled(true);
+
+    try {
+      if (game?.pinned && objectId) {
+        await window.electron.removeGameFromPinned(shop, objectId).then(() => {
+          showSuccessToast(t("game_removed_from_pinned"));
+        });
+      } else {
+        if (!objectId) return;
+
+        await window.electron.addGameToPinned(shop, objectId).then(() => {
+          showSuccessToast(t("game_added_to_pinned"));
+        });
+      }
+
+      updateLibrary();
+      updateGame();
+    } finally {
+      setToggleLibraryGameDisabled(false);
+    }
+  };
+
   const openGame = async () => {
     if (game) {
       if (game.executablePath) {
@@ -226,6 +257,17 @@ export function HeroPanelActions() {
           {game.favorite ? <HeartFillIcon /> : <HeartIcon />}
         </Button>
 
+        {userDetails && (
+          <Button
+            onClick={toggleGamePinned}
+            theme="outline"
+            disabled={deleting}
+            className="hero-panel-actions__action"
+          >
+            {game.pinned ? <PinSlashIcon /> : <PinIcon />}
+          </Button>
+        )}
+
         <Button
           onClick={() => setShowGameOptionsModal(true)}
           theme="outline"

src/renderer/src/pages/game-details/hero/hero-panel-playtime.tsx

@@ -11,7 +11,6 @@ import "./hero-panel-playtime.scss";
 
 export function HeroPanelPlaytime() {
   const [lastTimePlayed, setLastTimePlayed] = useState("");
-  
 
   const { game, isGameRunning } = useContext(gameDetailsContext);
   const { t } = useTranslation("game_details");
@@ -89,7 +88,7 @@ export function HeroPanelPlaytime() {
 
   return (
     <>
-      <p 
+      <p
         className="hero-panel-playtime__play-time"
         data-tooltip-place="top"
         data-tooltip-content={
@@ -97,11 +96,15 @@ export function HeroPanelPlaytime() {
             ? t("manual_playtime_tooltip")
             : undefined
         }
-        data-tooltip-id={game.hasManuallyUpdatedPlaytime ? "manual-playtime-warning" : undefined}
+        data-tooltip-id={
+          game.hasManuallyUpdatedPlaytime
+            ? "manual-playtime-warning"
+            : undefined
+        }
       >
         {game.hasManuallyUpdatedPlaytime && (
-          <AlertFillIcon 
-            size={16} 
+          <AlertFillIcon
+            size={16}
             className="hero-panel-playtime__manual-warning"
           />
         )}
@@ -119,7 +122,7 @@ export function HeroPanelPlaytime() {
           })}
         </p>
       )}
-      
+
       {game.hasManuallyUpdatedPlaytime && (
         <Tooltip
           id="manual-playtime-warning"
@@ -127,7 +130,6 @@ export function HeroPanelPlaytime() {
             zIndex: 9999,
           }}
           openOnClick={false}
-
         />
       )}
     </>

src/renderer/src/pages/profile/profile-content/profile-content.scss

@@ -58,6 +58,34 @@
     margin-bottom: calc(globals.$spacing-unit * 2);
   }
 
+  &__tabs {
+    display: flex;
+    gap: calc(globals.$spacing-unit);
+    margin-bottom: calc(globals.$spacing-unit * 2);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__tab {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.6);
+    padding: calc(globals.$spacing-unit) calc(globals.$spacing-unit * 2);
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    border-bottom: 2px solid transparent;
+    transition: all ease 0.2s;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.8);
+    }
+
+    &--active {
+      color: white;
+      border-bottom-color: #c9aa71;
+    }
+  }
+
   &__games-grid {
     list-style: none;
     margin: 0;

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

@@ -16,7 +16,8 @@ import "./profile-content.scss";
 const GAME_STATS_ANIMATION_DURATION_IN_MS = 3500;
 
 export function ProfileContent() {
-  const { userProfile, isMe, userStats } = useContext(userProfileContext);
+  const { userProfile, isMe, userStats, libraryGames, pinnedGames } =
+    useContext(userProfileContext);
   const [statsIndex, setStatsIndex] = useState(0);
   const [isAnimationRunning, setIsAnimationRunning] = useState(true);
   const statsAnimation = useRef(-1);
@@ -79,7 +80,8 @@ export function ProfileContent() {
       return <LockedProfile />;
     }
 
-    const hasGames = userProfile?.libraryGames.length > 0;
+    const hasGames = libraryGames.length > 0;
+    const hasPinnedGames = pinnedGames.length > 0;
 
     const shouldShowRightContent = hasGames || userProfile.friends.length > 0;
 
@@ -98,16 +100,36 @@ export function ProfileContent() {
 
           {hasGames && (
             <>
+              {hasPinnedGames && (
+                <div style={{ marginBottom: "2rem" }}>
+                  <div className="profile-content__section-header">
+                    <h2>{t("pinned")}</h2>
+                    <span>{pinnedGames.length}</span>
+                  </div>
+
+                  <ul className="profile-content__games-grid">
+                    {pinnedGames?.map((game) => (
+                      <UserLibraryGameCard
+                        game={game}
+                        key={game.objectId}
+                        statIndex={statsIndex}
+                        onMouseEnter={handleOnMouseEnterGameCard}
+                        onMouseLeave={handleOnMouseLeaveGameCard}
+                      />
+                    ))}
+                  </ul>
+                </div>
+              )}
+
               <div className="profile-content__section-header">
                 <h2>{t("library")}</h2>
-
                 {userStats && (
                   <span>{numberFormatter.format(userStats.libraryCount)}</span>
                 )}
               </div>
 
               <ul className="profile-content__games-grid">
-                {userProfile?.libraryGames?.map((game) => (
+                {libraryGames?.map((game) => (
                   <UserLibraryGameCard
                     game={game}
                     key={game.objectId}
@@ -139,6 +161,8 @@ export function ProfileContent() {
     numberFormatter,
     t,
     statsIndex,
+    libraryGames,
+    pinnedGames,
   ]);
 
   return (

src/renderer/src/pages/profile/profile-content/user-library-game-card.scss

@@ -65,6 +65,20 @@
     padding: 8px;
   }
 
+  &__favorite-icon {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    color: #ff6b6b;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+  }
+
   &__playtime {
     background-color: globals.$background-color;
     color: globals.$muted-color;

src/renderer/src/pages/profile/profile-content/user-library-game-card.tsx

@@ -9,7 +9,12 @@ import {
   formatDownloadProgress,
 } from "@renderer/helpers";
 import { userProfileContext } from "@renderer/context";
-import { ClockIcon, TrophyIcon, AlertFillIcon } from "@primer/octicons-react";
+import {
+  ClockIcon,
+  TrophyIcon,
+  AlertFillIcon,
+  HeartFillIcon,
+} from "@primer/octicons-react";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { Tooltip } from "react-tooltip";
 import { useTranslation } from "react-i18next";
@@ -98,6 +103,11 @@ export function UserLibraryGameCard({
           onClick={() => navigate(buildUserGameDetailsPath(game))}
         >
           <div className="user-library-game__overlay">
+            {game.isFavorite && (
+              <div className="user-library-game__favorite-icon">
+                <HeartFillIcon size={14} />
+              </div>
+            )}
             <small
               className="user-library-game__playtime"
               data-tooltip-place="top"