feat: pinning and showing featuring games in profile

src/locales/en/translation.json

@@ -210,6 +210,8 @@
     "download_error_not_cached_on_hydra": "This download is not available on Nimbus.",
     "game_removed_from_favorites": "Game removed from favorites",
     "game_added_to_favorites": "Game added to favorites",
+    "game_removed_from_pinned": "Game removed from pinned",
+    "game_added_to_pinned": "Game added to pinned",
     "automatically_extract_downloaded_files": "Automatically extract downloaded files",
     "create_start_menu_shortcut": "Create Start Menu shortcut",
     "invalid_wine_prefix_path": "Invalid Wine prefix path",
@@ -451,6 +453,7 @@
     "last_time_played": "Last played {{period}}",
     "activity": "Recent Activity",
     "library": "Library",
+    "pinned": "Pinned",
     "total_play_time": "Total playtime",
     "manual_playtime_tooltip": "This playtime has been manually updated",
     "no_recent_activity_title": "Hmmm… nothing here",

src/main/events/index.ts

@@ -16,6 +16,8 @@ import "./hardware/check-folder-write-permission";
 import "./library/add-game-to-library";
 import "./library/add-game-to-favorites";
 import "./library/remove-game-from-favorites";
+import "./library/add-game-to-pinned";
+import "./library/remove-game-from-pinned";
 import "./library/create-game-shortcut";
 import "./library/close-game";
 import "./library/delete-game-folder";

src/main/events/library/add-game-to-pinned.ts

@@ -0,0 +1,28 @@
+import { registerEvent } from "../register-event";
+import { gamesSublevel, levelKeys } from "@main/level";
+import { HydraApi } from "@main/services";
+import type { GameShop } from "@types";
+
+const addGameToPinned = async (
+  _event: Electron.IpcMainInvokeEvent,
+  shop: GameShop,
+  objectId: string
+) => {
+  const gameKey = levelKeys.game(shop, objectId);
+
+  const game = await gamesSublevel.get(gameKey);
+  if (!game) return;
+
+  HydraApi.put(`/profile/games/${shop}/${objectId}/pin`).catch(() => {});
+
+  try {
+    await gamesSublevel.put(gameKey, {
+      ...game,
+      pinned: true,
+    });
+  } catch (error) {
+    throw new Error(`Failed to update game pinned status: ${error}`);
+  }
+};
+
+registerEvent("addGameToPinned", addGameToPinned);

src/main/events/library/remove-game-from-pinned.ts

@@ -0,0 +1,28 @@
+import { registerEvent } from "../register-event";
+import { gamesSublevel, levelKeys } from "@main/level";
+import { HydraApi } from "@main/services";
+import type { GameShop } from "@types";
+
+const removeGameFromPinned = async (
+  _event: Electron.IpcMainInvokeEvent,
+  shop: GameShop,
+  objectId: string
+) => {
+  const gameKey = levelKeys.game(shop, objectId);
+
+  const game = await gamesSublevel.get(gameKey);
+  if (!game) return;
+
+  HydraApi.put(`/profile/games/${shop}/${objectId}/unpin`).catch(() => {});
+
+  try {
+    await gamesSublevel.put(gameKey, {
+      ...game,
+      pinned: false,
+    });
+  } catch (error) {
+    throw new Error(`Failed to update game pinned status: ${error}`);
+  }
+};
+
+registerEvent("removeGameFromPinned", removeGameFromPinned);

src/main/services/library-sync/merge-with-remote-games.ts

@@ -8,6 +8,7 @@ type ProfileGame = {
   playTimeInMilliseconds: number;
   hasManuallyUpdatedPlaytime: boolean;
   isFavorite?: boolean;
+  isPinned?: boolean;
 } & ShopAssets;
 
 export const mergeWithRemoteGames = async () => {
@@ -36,6 +37,7 @@ export const mergeWithRemoteGames = async () => {
             lastTimePlayed: updatedLastTimePlayed,
             playTimeInMilliseconds: updatedPlayTime,
             favorite: game.isFavorite ?? localGame.favorite,
+            pinned: game.isPinned ?? localGame.pinned,
           });
         } else {
           await gamesSublevel.put(gameKey, {
@@ -49,6 +51,7 @@ export const mergeWithRemoteGames = async () => {
             hasManuallyUpdatedPlaytime: game.hasManuallyUpdatedPlaytime,
             isDeleted: false,
             favorite: game.isFavorite ?? false,
+            pinned: game.isPinned ?? false,
           });
         }
 

src/main/services/library-sync/upload-games-batch.ts

@@ -27,6 +27,7 @@ export const uploadGamesBatch = async () => {
           shop: game.shop,
           lastTimePlayed: game.lastTimePlayed,
           isFavorite: game.favorite,
+          isPinned: game.pinned ?? false,
         };
       })
     ).catch(() => {});

src/preload/index.ts

@@ -143,6 +143,10 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("addGameToFavorites", shop, objectId),
   removeGameFromFavorites: (shop: GameShop, objectId: string) =>
     ipcRenderer.invoke("removeGameFromFavorites", shop, objectId),
+  addGameToPinned: (shop: GameShop, objectId: string) =>
+    ipcRenderer.invoke("addGameToPinned", shop, objectId),
+  removeGameFromPinned: (shop: GameShop, objectId: string) =>
+    ipcRenderer.invoke("removeGameFromPinned", shop, objectId),
   updateLaunchOptions: (
     shop: GameShop,
     objectId: string,

src/renderer/src/declaration.d.ts

@@ -126,6 +126,11 @@ 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,

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

@@ -3,6 +3,8 @@ import {
   GearIcon,
   HeartFillIcon,
   HeartIcon,
+  PinIcon,
+  PinSlashIcon,
   PlayIcon,
   PlusCircleIcon,
 } from "@primer/octicons-react";
@@ -82,6 +84,31 @@ 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) {
@@ -198,6 +225,15 @@ export function HeroPanelActions() {
           {game.favorite ? <HeartFillIcon /> : <HeartIcon />}
         </Button>
 
+        <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/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

@@ -68,6 +68,14 @@ export function ProfileContent() {
     return userProfile?.relation?.status === "ACCEPTED";
   }, [userProfile]);
 
+  const pinnedGames = useMemo(() => {
+    return userProfile?.libraryGames?.filter((game) => game.isPinned) || [];
+  }, [userProfile]);
+
+  const libraryGames = useMemo(() => {
+    return userProfile?.libraryGames || [];
+  }, [userProfile]);
+
   const content = useMemo(() => {
     if (!userProfile) return null;
 
@@ -80,6 +88,7 @@ export function ProfileContent() {
     }
 
     const hasGames = userProfile?.libraryGames.length > 0;
+    const hasPinnedGames = pinnedGames.length > 0;
 
     const shouldShowRightContent = hasGames || userProfile.friends.length > 0;
 
@@ -98,16 +107,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}

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,7 @@ 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 +98,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"

src/types/index.ts

@@ -71,6 +71,8 @@ export type UserGame = {
   achievementCount: number;
   achievementsPointsEarnedSum: number;
   hasManuallyUpdatedPlaytime: boolean;
+  isFavorite: boolean;
+  isPinned: boolean;
 } & ShopAssets;
 
 export interface GameRunning {

src/types/level.types.ts

@@ -44,6 +44,7 @@ export interface Game {
   executablePath?: string | null;
   launchOptions?: string | null;
   favorite?: boolean;
+  pinned?: boolean;
   automaticCloudSync?: boolean;
   hasManuallyUpdatedPlaytime?: boolean;
 }