Merge branch 'main' into feat/pinning-games

Update Russian Translation

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/locales/ru/translation.json

@@ -10,7 +10,8 @@
     "hot": "Сейчас популярно",
     "start_typing": "Начинаю вводить текст...",
     "weekly": "📅 Лучшие игры недели",
-    "achievements": "🏆 Игры с достижениями"
+    "achievements": "🏆 Игры с достижениями",
+    "already_in_library": "Уже в библиотеке"
   },
   "sidebar": {
     "catalogue": "Каталог",
@@ -209,7 +210,23 @@
     "invalid_wine_prefix_path": "Недопустимый путь префикса Wine",
     "invalid_wine_prefix_path_description": "Путь к префиксу Wine недействителен. Пожалуйста, проверьте путь и попробуйте снова.",
     "missing_wine_prefix": "Префикс Wine необходим для создания резервной копии в Linux",
-    "download_error_not_cached_on_hydra": "Эта загрузка недоступна на Nimbus."
+    "download_error_not_cached_on_hydra": "Эта загрузка недоступна на Nimbus.",
+    "update_playtime_success": "Время игры успешно обновлено",
+    "update_playtime_error": "Не удалось обновить время игры",
+    "manual_playtime_warning": "Ваши часы будут отмечены как обновленные вручную. Это действие нельзя отменить.",
+    "artifact_renamed": "Резервная копия успешно переименована",
+    "rename_artifact": "Переименовать резервную копию",
+    "rename_artifact_description": "Переименуйте резервную копию, присвоив ей более описательное имя.",
+    "artifact_name_label": "Название резервной копии",
+    "artifact_name_placeholder": "Введите название для резервной копии",
+    "max_length_field": "Это поле должно содержать менее {{length}} символов",
+    "freeze_backup": "Закрепить, чтобы она не была перезаписана автоматическими резервными копиями",
+    "unfreeze_backup": "Открепить",
+    "backup_frozen": "Резервная копия закреплена",
+    "backup_unfrozen": "Резервная копия откреплена",
+    "backup_freeze_failed": "Не удалось закрепить резервную копию",
+    "backup_freeze_failed_description": "Вы должны оставить как минимум один свободный слот для автоматических резервных копий",
+    "manual_playtime_tooltip": "Это время игры было обновлено вручную"
   },
   "activation": {
     "title": "Активировать Hydra",
@@ -385,7 +402,8 @@
     "hidden": "Скрытый",
     "test_notification": "Тестовое уведомление",
     "notification_preview": "Предварительный просмотр уведомления о достижении",
-    "enable_friend_start_game_notifications": "Когда друг начинает играть в игру"
+    "enable_friend_start_game_notifications": "Когда друг начинает играть в игру",
+    "enable_steam_achievements": "Включить поиск достижений Steam"
   },
   "notifications": {
     "download_complete": "Загрузка завершена",
@@ -398,12 +416,12 @@
     "notification_achievement_unlocked_title": "Достижение разблокировано для {{game}}",
     "notification_achievement_unlocked_body": "были разблокированы {{achievement}} и другие {{count}}",
     "new_friend_request_title": "Новый запрос на добавление в друзья",
-    "new_friend_request_description": "Вы получили новый запрос на добавление в друзья",
     "extraction_complete": "Распаковка завершена",
     "game_extracted": "{{title}} успешно распакован",
     "friend_started_playing_game": "{{displayName}} начал играть в игру",
     "test_achievement_notification_title": "Это тестовое уведомление",
-    "test_achievement_notification_description": "Довольно круто, да?"
+    "test_achievement_notification_description": "Довольно круто, да?",
+    "new_friend_request_description": "{{displayName}} отправил вам запрос в друзья"
   },
   "system_tray": {
     "open": "Открыть Hydra",
@@ -505,7 +523,9 @@
     "achievements_unlocked": "Достижения разблокированы",
     "earned_points": "Заработано очков:",
     "show_achievements_on_profile": "Покажите свои достижения в профиле",
-    "show_points_on_profile": "Показывать заработанные очки в своем профиле"
+    "show_points_on_profile": "Показывать заработанные очки в своем профиле",
+    "error_adding_friend": "Не удалось отправить запрос в друзья. Пожалуйста, проверьте код друга",
+    "friend_code_length_error": "Код друга должен содержать 8 символов"
   },
   "achievement": {
     "achievement_unlocked": "Достижение разблокировано",

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";
@@ -64,6 +66,7 @@ import "./auth/sign-out";
 import "./auth/open-auth-window";
 import "./auth/get-session-hash";
 import "./user/get-user";
+import "./user/get-user-library";
 import "./user/get-blocked-users";
 import "./user/block-user";
 import "./user/unblock-user";

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

@@ -0,0 +1,29 @@
+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;
+
+  const response = await HydraApi.put(`/profile/games/${shop}/${objectId}/pin`);
+
+  try {
+    await gamesSublevel.put(gameKey, {
+      ...game,
+      pinned: true,
+      pinnedDate: new Date(response.pinnedDate),
+    });
+  } 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,29 @@
+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,
+      pinnedDate: null,
+    });
+  } catch (error) {
+    throw new Error(`Failed to update game pinned status: ${error}`);
+  }
+};
+
+registerEvent("removeGameFromPinned", removeGameFromPinned);

src/main/events/user/get-user-library.ts

@@ -0,0 +1,23 @@
+import { registerEvent } from "../register-event";
+import { HydraApi } from "@main/services";
+import type { UserLibraryResponse } from "@types";
+
+const getUserLibrary = async (
+  _event: Electron.IpcMainInvokeEvent,
+  userId: string,
+  take: number = 12,
+  skip: number = 0
+): Promise<UserLibraryResponse | null> => {
+  const params = new URLSearchParams();
+
+  params.append("take", take.toString());
+  params.append("skip", skip.toString());
+
+  const queryString = params.toString();
+  const baseUrl = `/users/${userId}/library`;
+  const url = queryString ? `${baseUrl}?${queryString}` : baseUrl;
+
+  return HydraApi.get<UserLibraryResponse>(url).catch(() => null);
+};
+
+registerEvent("getUserLibrary", getUserLibrary);

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,
@@ -366,6 +370,8 @@ contextBridge.exposeInMainWorld("electron", {
 
   /* User */
   getUser: (userId: string) => ipcRenderer.invoke("getUser", userId),
+  getUserLibrary: (userId: string, take?: number, skip?: number) =>
+    ipcRenderer.invoke("getUserLibrary", userId, take, skip),
   blockUser: (userId: string) => ipcRenderer.invoke("blockUser", userId),
   unblockUser: (userId: string) => ipcRenderer.invoke("unblockUser", userId),
   getUserFriends: (userId: string, take: number, skip: number) =>

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";
@@ -14,9 +14,12 @@ export interface UserProfileContext {
   isMe: boolean;
   userStats: UserStats | null;
   getUserProfile: () => Promise<void>;
+  getUserLibraryGames: () => Promise<void>;
   setSelectedBackgroundImage: React.Dispatch<React.SetStateAction<string>>;
   backgroundImage: string;
   badges: Badge[];
+  libraryGames: UserGame[];
+  pinnedGames: UserGame[];
 }
 
 export const DEFAULT_USER_PROFILE_BACKGROUND = "#151515B3";
@@ -27,9 +30,12 @@ export const userProfileContext = createContext<UserProfileContext>({
   isMe: false,
   userStats: null,
   getUserProfile: async () => {},
+  getUserLibraryGames: async () => {},
   setSelectedBackgroundImage: () => {},
   backgroundImage: "",
   badges: [],
+  libraryGames: [],
+  pinnedGames: [],
 });
 
 const { Provider } = userProfileContext;
@@ -49,6 +55,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 +93,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 +127,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 +136,8 @@ export function UserProfileContextProvider({
 
   useEffect(() => {
     setUserProfile(null);
+    setLibraryGames([]);
+    setPinnedGames([]);
     setHeroBackground(DEFAULT_USER_PROFILE_BACKGROUND);
 
     getUserProfile();
@@ -124,10 +151,13 @@ export function UserProfileContextProvider({
         heroBackground,
         isMe,
         getUserProfile,
+        getUserLibraryGames,
         setSelectedBackgroundImage,
         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/hooks/use-section-collapse.ts

@@ -0,0 +1,27 @@
+import { useState, useCallback } from "react";
+
+interface SectionCollapseState {
+  pinned: boolean;
+  library: boolean;
+}
+
+export function useSectionCollapse() {
+  const [collapseState, setCollapseState] = useState<SectionCollapseState>({
+    pinned: false,
+    library: false,
+  });
+
+  const toggleSection = useCallback((section: keyof SectionCollapseState) => {
+    setCollapseState((prevState) => ({
+      ...prevState,
+      [section]: !prevState[section],
+    }));
+  }, []);
+
+  return {
+    collapseState,
+    toggleSection,
+    isPinnedCollapsed: collapseState.pinned,
+    isLibraryCollapsed: collapseState.library,
+  };
+}

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";
@@ -19,6 +26,7 @@ export function HeroPanelActions() {
     useState(false);
 
   const { isGameDeleting } = useDownload();
+  const { userDetails } = useUserDetails();
 
   const {
     game,
@@ -82,6 +90,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) {
@@ -198,6 +229,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

@@ -54,8 +54,66 @@
   &__section-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin-bottom: calc(globals.$spacing-unit * 2);
+    gap: calc(globals.$spacing-unit);
+  }
+
+  &__section-title-group {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit);
+    flex: 1;
+  }
+
+  &__section-count {
+    margin-left: auto;
+  }
+
+  &__collapse-button {
+    background: none;
+    border: none;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    padding: 4px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease 0.2s;
+    flex-shrink: 0;
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.9);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__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 {

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

@@ -3,7 +3,7 @@ import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ProfileHero } from "../profile-hero/profile-hero";
 import { useAppDispatch, useFormat } from "@renderer/hooks";
 import { setHeaderTitle } from "@renderer/features";
-import { TelescopeIcon } from "@primer/octicons-react";
+import { TelescopeIcon, ChevronRightIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
 import { LockedProfile } from "./locked-profile";
 import { ReportProfile } from "../report-profile/report-profile";
@@ -11,15 +11,80 @@ import { FriendsBox } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
 import { UserLibraryGameCard } from "./user-library-game-card";
+import { useSectionCollapse } from "@renderer/hooks/use-section-collapse";
+import { motion, AnimatePresence } from "framer-motion";
 import "./profile-content.scss";
 
 const GAME_STATS_ANIMATION_DURATION_IN_MS = 3500;
 
+const sectionVariants = {
+  collapsed: {
+    opacity: 0,
+    y: -20,
+    height: 0,
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 0.1, 0.25, 1],
+      opacity: { duration: 0.1 },
+      y: { duration: 0.1 },
+      height: { duration: 0.2 },
+    },
+  },
+  expanded: {
+    opacity: 1,
+    y: 0,
+    height: "auto",
+    transition: {
+      duration: 0.3,
+      ease: [0.25, 0.1, 0.25, 1],
+      opacity: { duration: 0.2, delay: 0.1 },
+      y: { duration: 0.3 },
+      height: { duration: 0.3 },
+    },
+  },
+};
+
+const gameCardVariants = {
+  hidden: {
+    opacity: 0,
+    y: 20,
+    scale: 0.95,
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    scale: 1,
+    transition: {
+      duration: 0.4,
+      ease: [0.25, 0.1, 0.25, 1],
+    },
+  },
+};
+
+const chevronVariants = {
+  collapsed: {
+    rotate: 0,
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut",
+    },
+  },
+  expanded: {
+    rotate: 90,
+    transition: {
+      duration: 0.2,
+      ease: "easeInOut",
+    },
+  },
+};
+
 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);
+  const { toggleSection, isPinnedCollapsed } = useSectionCollapse();
 
   const dispatch = useAppDispatch();
 
@@ -79,14 +144,17 @@ export function ProfileContent() {
       return <LockedProfile />;
     }
 
-    const hasGames = userProfile?.libraryGames.length > 0;
+    const hasGames = libraryGames.length > 0;
+    const hasPinnedGames = pinnedGames.length > 0;
+    const hasAnyGames = hasGames || hasPinnedGames;
 
-    const shouldShowRightContent = hasGames || userProfile.friends.length > 0;
+    const shouldShowRightContent =
+      hasAnyGames || userProfile.friends.length > 0;
 
     return (
       <section className="profile-content__section">
         <div className="profile-content__main">
-          {!hasGames && (
+          {!hasAnyGames && (
             <div className="profile-content__no-games">
               <div className="profile-content__telescope-icon">
                 <TelescopeIcon size={24} />
@@ -96,28 +164,106 @@ export function ProfileContent() {
             </div>
           )}
 
-          {hasGames && (
-            <>
-              <div className="profile-content__section-header">
-                <h2>{t("library")}</h2>
+          {hasAnyGames && (
+            <div>
+              {hasPinnedGames && (
+                <div style={{ marginBottom: "2rem" }}>
+                  <div className="profile-content__section-header">
+                    <div className="profile-content__section-title-group">
+                      <button
+                        type="button"
+                        className="profile-content__collapse-button"
+                        onClick={() => toggleSection("pinned")}
+                        aria-label={
+                          isPinnedCollapsed
+                            ? "Expand pinned section"
+                            : "Collapse pinned section"
+                        }
+                      >
+                        <motion.div
+                          variants={chevronVariants}
+                          animate={isPinnedCollapsed ? "collapsed" : "expanded"}
+                        >
+                          <ChevronRightIcon size={16} />
+                        </motion.div>
+                      </button>
+                      <h2>{t("pinned")}</h2>
+                    </div>
+                    <span className="profile-content__section-count">
+                      {pinnedGames.length}
+                    </span>
+                  </div>
 
-                {userStats && (
-                  <span>{numberFormatter.format(userStats.libraryCount)}</span>
-                )}
-              </div>
+                  <AnimatePresence initial={true} mode="wait">
+                    {!isPinnedCollapsed && (
+                      <motion.div
+                        key="pinned-content"
+                        variants={sectionVariants}
+                        initial="collapsed"
+                        animate="expanded"
+                        exit="collapsed"
+                        layout
+                      >
+                        <ul className="profile-content__games-grid">
+                          {pinnedGames?.map((game, index) => (
+                            <motion.li
+                              key={game.objectId}
+                              variants={gameCardVariants}
+                              initial="hidden"
+                              animate="visible"
+                              transition={{ delay: index * 0.1 }}
+                              style={{ listStyle: "none" }}
+                            >
+                              <UserLibraryGameCard
+                                game={game}
+                                statIndex={statsIndex}
+                                onMouseEnter={handleOnMouseEnterGameCard}
+                                onMouseLeave={handleOnMouseLeaveGameCard}
+                              />
+                            </motion.li>
+                          ))}
+                        </ul>
+                      </motion.div>
+                    )}
+                  </AnimatePresence>
+                </div>
+              )}
 
-              <ul className="profile-content__games-grid">
-                {userProfile?.libraryGames?.map((game) => (
-                  <UserLibraryGameCard
-                    game={game}
-                    key={game.objectId}
-                    statIndex={statsIndex}
-                    onMouseEnter={handleOnMouseEnterGameCard}
-                    onMouseLeave={handleOnMouseLeaveGameCard}
-                  />
-                ))}
-              </ul>
-            </>
+              {hasGames && (
+                <div>
+                  <div className="profile-content__section-header">
+                    <div className="profile-content__section-title-group">
+                      <h2>{t("library")}</h2>
+                    </div>
+                    {userStats && (
+                      <span className="profile-content__section-count">
+                        {numberFormatter.format(userStats.libraryCount)}
+                      </span>
+                    )}
+                  </div>
+
+                  <ul className="profile-content__games-grid">
+                    {libraryGames?.map((game, index) => (
+                      <motion.li
+                        key={game.objectId}
+                        variants={gameCardVariants}
+                        initial="hidden"
+                        animate="visible"
+                        transition={{ delay: index * 0.1 }}
+                        style={{ listStyle: "none" }}
+                      >
+                        <UserLibraryGameCard
+                          game={game}
+                          statIndex={statsIndex}
+                          onMouseEnter={handleOnMouseEnterGameCard}
+                          onMouseLeave={handleOnMouseLeaveGameCard}
+                        />
+                      </motion.li>
+                    ))}
+                  </ul>
+                </div>
+              )}
+            </div>
           )}
         </div>
 
@@ -139,6 +285,10 @@ export function ProfileContent() {
     numberFormatter,
     t,
     statsIndex,
+    libraryGames,
+    pinnedGames,
+    isPinnedCollapsed,
+    toggleSection,
   ]);
 
   return (

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

@@ -65,6 +65,47 @@
     padding: 8px;
   }
 
+  &__actions-container {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    display: flex;
+    gap: 6px;
+    z-index: 2;
+  }
+
+  &__favorite-icon {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.7);
+    border-radius: 50%;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__pin-button {
+    color: white;
+    background-color: rgba(0, 0, 0, 0.7);
+    border: none;
+    border-radius: 50%;
+    padding: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.9);
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
   &__playtime {
     background-color: globals.$background-color;
     color: globals.$muted-color;

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

@@ -1,6 +1,6 @@
 import { UserGame } from "@types";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
-import { useFormat } from "@renderer/hooks";
+import { useFormat, useToast } from "@renderer/hooks";
 import { useNavigate } from "react-router-dom";
 import { useCallback, useContext, useState } from "react";
 import {
@@ -9,7 +9,14 @@ import {
   formatDownloadProgress,
 } from "@renderer/helpers";
 import { userProfileContext } from "@renderer/context";
-import { ClockIcon, TrophyIcon, AlertFillIcon } from "@primer/octicons-react";
+import {
+  ClockIcon,
+  TrophyIcon,
+  AlertFillIcon,
+  HeartFillIcon,
+  PinIcon,
+  PinSlashIcon,
+} from "@primer/octicons-react";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import { Tooltip } from "react-tooltip";
 import { useTranslation } from "react-i18next";
@@ -28,11 +35,15 @@ export function UserLibraryGameCard({
   onMouseEnter,
   onMouseLeave,
 }: UserLibraryGameCardProps) {
-  const { userProfile } = useContext(userProfileContext);
+  const { userProfile, isMe, getUserLibraryGames } =
+    useContext(userProfileContext);
   const { t } = useTranslation("user_profile");
+  const { t: tGame } = useTranslation("game_details");
   const { numberFormatter } = useFormat();
+  const { showSuccessToast } = useToast();
   const navigate = useNavigate();
   const [isTooltipHovered, setIsTooltipHovered] = useState(false);
+  const [isPinning, setIsPinning] = useState(false);
 
   const getStatsItemCount = useCallback(() => {
     let statsCount = 1;
@@ -84,6 +95,32 @@ export function UserLibraryGameCard({
     [numberFormatter, t]
   );
 
+  const toggleGamePinned = async () => {
+    setIsPinning(true);
+
+    try {
+      if (game.isPinned) {
+        await window.electron
+          .removeGameFromPinned(game.shop, game.objectId)
+          .then(() => {
+            showSuccessToast(tGame("game_removed_from_pinned"));
+          });
+      } else {
+        await window.electron
+          .addGameToPinned(game.shop, game.objectId)
+          .then(() => {
+            showSuccessToast(tGame("game_added_to_pinned"));
+          });
+      }
+
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      await getUserLibraryGames();
+    } finally {
+      setIsPinning(false);
+    }
+  };
+
   return (
     <>
       <li
@@ -98,6 +135,32 @@ export function UserLibraryGameCard({
           onClick={() => navigate(buildUserGameDetailsPath(game))}
         >
           <div className="user-library-game__overlay">
+            {(game.isFavorite || isMe) && (
+              <div className="user-library-game__actions-container">
+                {game.isFavorite && (
+                  <div className="user-library-game__favorite-icon">
+                    <HeartFillIcon size={12} />
+                  </div>
+                )}
+                {isMe && (
+                  <button
+                    type="button"
+                    className="user-library-game__pin-button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleGamePinned();
+                    }}
+                    disabled={isPinning}
+                  >
+                    {game.isPinned ? (
+                      <PinSlashIcon size={12} />
+                    ) : (
+                      <PinIcon size={12} />
+                    )}
+                  </button>
+                )}
+              </div>
+            )}
             <small
               className="user-library-game__playtime"
               data-tooltip-place="top"

src/types/index.ts

@@ -71,8 +71,17 @@ export type UserGame = {
   achievementCount: number;
   achievementsPointsEarnedSum: number;
   hasManuallyUpdatedPlaytime: boolean;
+  isFavorite: boolean;
+  isPinned: boolean;
+  pinnedDate?: Date | null;
 } & ShopAssets;
 
+export interface UserLibraryResponse {
+  totalCount: number;
+  library: UserGame[];
+  pinnedGames: UserGame[];
+}
+
 export interface GameRunning {
   id: string;
   title: string;

src/types/level.types.ts

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